/* MyVoyageBoard split stylesheet: styles-sharing-voyages.css
   Mobile navigation, sharing/import, voyage hero and Ports of Call popup
   Preserves original cascade order from styles.css. */

/* =========================================================
   PATCH: Trip Edit modal footer should never hide behind mobile tab bar
   Keeps Cancel / Save Trip visible on iPhone + Android PWAs.
========================================================= */
@media (max-width: 820px){
  /* The trip modal is an app-level sheet; it must sit above the mobile tab bar. */
  #trip-modal-backdrop{
    z-index: 2147483000 !important;
    padding: max(8px, env(safe-area-inset-top, 0px)) 8px max(8px, env(safe-area-inset-bottom, 0px)) !important;
    align-items: flex-end !important;
  }

  /* Hide the site bottom nav while the Edit/Add Voyage sheet is open. */
  #trip-modal-backdrop[aria-hidden="false"] ~ .mobile-tabbar{
    display: none !important;
  }

  #trip-modal-backdrop .modal.trip-modal{
    width: min(760px, 100%) !important;
    max-height: calc(100svh - max(16px, env(safe-area-inset-top, 0px)) - max(16px, env(safe-area-inset-bottom, 0px))) !important;
    border-radius: 22px 22px 0 0 !important;
    overflow: hidden !important;
  }

  #trip-modal-backdrop .trip-modal-body{
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 16px !important;
  }

  #trip-modal-backdrop .trip-modal-footer-dock{
    flex: 0 0 auto !important;
    display: block;
    position: relative !important;
    z-index: 20 !important;
    padding: 10px 14px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    border-top: 1px solid rgba(148,163,184,.24) !important;
    box-shadow: 0 -10px 28px rgba(15,23,42,.18) !important;
  }

  #trip-modal-backdrop .trip-modal-footer-dock > div{
    display: flex !important;
    width: 100% !important;
    gap: 8px !important;
  }

  #trip-modal-backdrop .trip-modal-footer-dock .btn{
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 46px !important;
  }
}

/* =========================================================
   PATCH: Notification Settings footer safe area
   Keeps Enable / Save Settings above the iPhone bottom bar and site tab bar.
========================================================= */
@media (max-width: 820px){
  #notification-settings-backdrop.notification-settings-backdrop{
    z-index: 2147483600 !important;
    align-items: flex-end !important;
    padding: max(8px, env(safe-area-inset-top, 0px)) 0 0 !important;
  }

  #notification-settings-backdrop .notification-settings-modal{
    width: 100% !important;
    max-height: calc(100svh - max(10px, env(safe-area-inset-top, 0px))) !important;
    border-radius: 28px 28px 0 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #notification-settings-backdrop .notification-settings-header{
    flex: 0 0 auto !important;
  }

  #notification-settings-backdrop .notification-settings-body{
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 18px !important;
  }

  #notification-settings-backdrop .notification-settings-actions{
    flex: 0 0 auto !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 5 !important;
    padding: 14px 20px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    background: color-mix(in srgb, var(--surface-2) 94%, transparent) !important;
    box-shadow: 0 -12px 30px rgba(15,23,42,.16) !important;
  }
}

/* =========================================================
   PATCH: View Notifications screen
   Adds a clean notification inbox/status panel separate from settings.
========================================================= */
.notification-view-backdrop{
  position:fixed;
  inset:0;
  z-index:2147483600;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(2,6,23,.52);
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
}
.notification-view-modal{
  width:min(680px, calc(100vw - 28px));
  max-height:min(84vh, 800px);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  border-radius:28px;
  border:1px solid var(--surface-border);
  background:var(--surface-2);
  color:var(--text);
  box-shadow:0 26px 80px rgba(15,23,42,.32);
}
.notification-view-header,
.notification-view-actions{
  flex:0 0 auto;
  padding:20px 24px;
  background:color-mix(in srgb, var(--surface-2) 88%, transparent);
  border-color:var(--border);
}
.notification-view-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  border-bottom:1px solid var(--border);
}
.notification-view-header h3{ margin:0; font-size:1.35rem; color:var(--text); }
.notification-view-header p{ margin:4px 0 0; color:var(--muted); }
.notification-view-close{ width:44px; height:44px; border-radius:999px; padding:0; }

.notification-view-loading,
.notification-empty{
  color:var(--muted);
  font-weight:700;
  padding:12px 2px;
}
.notification-status-strip,
.notification-view-card{
  border:1px solid var(--row-border);
  background:var(--row-bg);
  border-radius:20px;
  box-shadow:0 10px 24px rgba(0,0,0,.13);
}
.notification-status-strip{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
}
.notification-status-strip strong,
.notification-view-card strong{ color:var(--text); }
.notification-status-strip small,
.notification-reminder-row small,
.notification-sent-row small{ display:block; margin-top:3px; color:var(--muted); font-weight:700; }
.notification-dot{
  width:12px;
  height:12px;
  border-radius:999px;
  background:var(--success, #22c55e);
  box-shadow:0 0 0 5px color-mix(in srgb, var(--success, #22c55e) 18%, transparent);
  flex:0 0 auto;
}

.notification-card-title{
  font-size:.84rem;
  font-weight:900;
  color:var(--muted);
  letter-spacing:.04em;
  text-transform:uppercase;
  margin-bottom:10px;
}
.notification-reminder-row{
  width:100%;
  border:1px solid var(--row-border);
  background:color-mix(in srgb, var(--row-bg) 88%, transparent);
  color:var(--text);
  border-radius:16px;
  padding:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  text-align:left;
  cursor:pointer;
  margin-top:8px;
}
.notification-reminder-row--next{
  border-color:color-mix(in srgb, var(--accent) 45%, var(--row-border));
  box-shadow:0 10px 24px color-mix(in srgb, var(--accent) 16%, transparent);
}
.notification-pill{
  flex:0 0 auto;
  border-radius:999px;
  padding:6px 9px;
  font-size:.72rem;
  font-weight:900;
  border:1px solid var(--row-border);
  color:var(--muted);
  background:var(--chip-bg);
}
.notification-pill--scheduled{ color:var(--success, #16a34a); }
.notification-pill--soon{ color:#f59e0b; }
.notification-pill--due{ color:var(--accent); }
.notification-pill--missed{ color:#ef4444; }
.notification-sent-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 0;
  border-top:1px solid var(--row-border);
}

.notification-sent-row > span{
  width:24px;
  height:24px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:color-mix(in srgb, var(--success, #22c55e) 18%, transparent);
  color:var(--success, #22c55e);
  font-weight:900;
  flex:0 0 auto;
}
.notification-view-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  border-top:1px solid var(--border);
}
body.light .notification-view-backdrop{ background:rgba(15,23,42,.28); }
body.light .notification-view-modal{ background:rgba(255,255,255,.96); box-shadow:0 26px 80px rgba(15,23,42,.22); }
body.light .notification-status-strip,
body.light .notification-view-card{ background:rgba(255,255,255,.82); box-shadow:0 10px 24px rgba(15,23,42,.08); }
@media (max-width:820px){
  .notification-view-backdrop{
    align-items:flex-end;
    padding:max(8px, env(safe-area-inset-top, 0px)) 0 0;
  }
  .notification-view-modal{
    width:100%;
    max-height:calc(100svh - max(10px, env(safe-area-inset-top, 0px)));
    border-radius:28px 28px 0 0;
    border-bottom:0;
  }
  .notification-view-header,
  .notification-view-body,
  .notification-view-actions{ padding-left:20px; padding-right:20px; }
  .notification-view-actions{
    position:sticky;
    bottom:0;
    padding-bottom:calc(18px + env(safe-area-inset-bottom, 0px));
    flex-direction:column;
    box-shadow:0 -12px 30px rgba(15,23,42,.16);
  }
  .notification-view-actions .btn{ width:100%; }
}

/* =========================================================
   PATCH: View Notifications should open as a real modal sheet
   Matches Notification Settings instead of rendering as a side panel.
========================================================= */
.notification-view-backdrop{
  position:fixed !important;
  inset:0 !important;
  z-index:2147483200 !important;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(2, 6, 23, .52);
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
}
.notification-view-modal{
  width:min(640px, calc(100vw - 28px));
  max-height:min(86vh, 780px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-radius:28px;
  border:1px solid var(--surface-border, rgba(148,163,184,.36));
  background:var(--surface-2, var(--card));
  color:var(--text);
  box-shadow:0 26px 80px rgba(15,23,42,.34);
}
.notification-view-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:22px 24px 16px;
  border-bottom:1px solid var(--border, rgba(148,163,184,.22));
  background:color-mix(in srgb, var(--surface-2, var(--card)) 86%, transparent);
}
.notification-view-header h3{
  margin:0;
  font-size:1.45rem;
  line-height:1.1;
  color:var(--text) !important;
}
.notification-view-header p{
  margin:6px 0 0;
  color:var(--muted) !important;
  line-height:1.35;
}
.notification-view-close{
  width:44px;
  height:44px;
  min-width:44px;
  border-radius:999px;
  padding:0;
  background:var(--chip-bg, rgba(255,255,255,.72)) !important;
  border:1px solid var(--surface-border, rgba(148,163,184,.36)) !important;
  color:var(--text) !important;
}
.notification-view-body{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:18px 24px;
}
.notification-view-loading,
.notification-empty{
  padding:12px 14px;
  border-radius:16px;
  color:var(--muted);
  background:var(--row-bg, rgba(255,255,255,.58));
  border:1px solid var(--row-border, rgba(148,163,184,.24));
}
.notification-status-strip,
.notification-view-card{
  border:1px solid var(--row-border, rgba(148,163,184,.28));
  background:var(--row-bg, rgba(255,255,255,.58));
  border-radius:18px;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
}
.notification-status-strip{
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 14px;
}
.notification-status-strip strong,
.notification-card-title,
.notification-reminder-row strong,
.notification-sent-row strong{
  color:var(--text) !important;
}
.notification-status-strip small,
.notification-reminder-row small,
.notification-sent-row small{
  display:block;
  margin-top:3px;
  color:var(--muted) !important;
}
.notification-dot{
  width:12px;
  height:12px;
  border-radius:999px;
  flex:0 0 auto;
  background:var(--success, #22c55e);
  box-shadow:0 0 0 6px color-mix(in srgb, var(--success, #22c55e) 18%, transparent);
}
.notification-view-card{
  padding:14px;
}
.notification-card-title{
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.82rem;
  margin-bottom:10px;
}
.notification-reminder-row{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  text-align:left;
  padding:12px;
  border-radius:16px;
  border:1px solid var(--row-border, rgba(148,163,184,.24));
  background:color-mix(in srgb, var(--row-bg, rgba(255,255,255,.7)) 80%, transparent);
  color:var(--text);
  cursor:pointer;
}
.notification-reminder-row + .notification-reminder-row{
  margin-top:8px;
}
.notification-reminder-row--next{
  border-color:color-mix(in srgb, var(--accent, #38bdf8) 42%, var(--row-border, rgba(148,163,184,.24)));
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent, #38bdf8) 14%, transparent), color-mix(in srgb, var(--row-bg, rgba(255,255,255,.7)) 88%, transparent));
}
.notification-pill{
  flex:0 0 auto;
  border-radius:999px;
  padding:6px 9px;
  font-size:.72rem;
  font-weight:900;
  white-space:nowrap;
  border:1px solid rgba(148,163,184,.24);
  background:var(--chip-bg, rgba(255,255,255,.72));
  color:var(--muted);
}
.notification-pill--soon,
.notification-pill--due{
  color:var(--accent-strong, #0284c7);
  border-color:color-mix(in srgb, var(--accent, #38bdf8) 44%, transparent);
  background:color-mix(in srgb, var(--accent, #38bdf8) 12%, var(--chip-bg, rgba(255,255,255,.72)));
}
.notification-pill--missed{
  color:#ef4444;
  border-color:rgba(239,68,68,.35);
  background:rgba(239,68,68,.10);
}
.notification-sent-row{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:11px 0;
  border-top:1px solid var(--row-border, rgba(148,163,184,.20));
}
.notification-sent-row:first-of-type{
  border-top:0;
  padding-top:0;
}
.notification-sent-row > span{
  color:var(--success, #22c55e);
  font-weight:900;
}
.notification-view-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding:16px 24px 22px;
  border-top:1px solid var(--border, rgba(148,163,184,.18));
  background:color-mix(in srgb, var(--surface-2, var(--card)) 90%, transparent);
}
.notification-view-actions .btn,
.notification-view-actions button{
  color:var(--text);
}
body.light .notification-view-backdrop{
  background:rgba(15, 23, 42, .28);
}
body.light .notification-view-modal{
  background:rgba(255,255,255,.96) !important;
  box-shadow:0 26px 80px rgba(15,23,42,.22);
}
body.light .notification-status-strip,
body.light .notification-view-card,
body.light .notification-view-loading,
body.light .notification-empty{
  background:rgba(255,255,255,.86) !important;
  box-shadow:0 10px 24px rgba(15,23,42,.08);
}
@media (max-width:760px){
  .notification-view-backdrop{
    align-items:flex-end;
    padding:0;
  }
  .notification-view-modal{
    width:100%;
    max-height:88svh;
    border-radius:28px 28px 0 0;
    border-bottom:0;
  }
  .notification-view-header,
  .notification-view-body,
  .notification-view-actions{
    padding-left:20px;
    padding-right:20px;
  }
  .notification-view-actions{
    flex-direction:column;
    padding-bottom:calc(18px + env(safe-area-inset-bottom, 0px));
  }
  .notification-view-actions .btn{
    width:100%;
    min-height:46px;
  }
  body.notification-view-open .mobile-tabbar{
    display:none !important;
  }
}


/* ===== Share / Import Trip Template ===== */
.trip-template-backdrop{
  position:fixed; inset:0; z-index:99999; display:none; align-items:center; justify-content:center;
  padding:18px; background:rgba(15,23,42,.52); backdrop-filter:blur(8px);
}
.trip-template-modal{
  width:min(560px, 100%); max-height:min(84vh, 720px); overflow:auto;
  border-radius:24px; padding:18px; border:1px solid var(--border, rgba(148,163,184,.35));
  background:var(--card, #fff); color:var(--text, #0f172a); box-shadow:0 24px 80px rgba(2,6,23,.35);
}
.trip-template-modal-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:8px; }
.trip-template-modal h2{ margin:2px 0 0; font-size:1.25rem; line-height:1.15; }
.trip-template-kicker{ font-size:.76rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted, #64748b); }
.trip-template-copy{ margin:8px 0 14px; color:var(--muted, #64748b); line-height:1.45; }
.trip-template-includes{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:12px 0 14px; }
.trip-template-includes > div{ border:1px solid var(--border, rgba(148,163,184,.35)); border-radius:16px; padding:12px; background:var(--soft, rgba(148,163,184,.08)); line-height:1.35; }
.trip-template-label{ display:block; margin:10px 0 6px; font-weight:800; font-size:.88rem; }
.trip-template-link,.trip-template-import-input{
  width:100%; min-height:92px; resize:vertical; border-radius:16px; padding:12px;
  border:1px solid var(--border, rgba(148,163,184,.35)); background:var(--input-bg, rgba(255,255,255,.82)); color:inherit;
  font:inherit; box-sizing:border-box;
}
.trip-template-meta{ margin-top:8px; font-size:.84rem; color:var(--muted, #64748b); }
.trip-template-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:16px; flex-wrap:wrap; }
.trip-template-error{ margin-top:10px; border-radius:14px; padding:10px 12px; background:rgba(239,68,68,.12); color:#b91c1c; font-weight:700; }
@media (max-width:640px){
  .trip-template-backdrop{ align-items:flex-end; padding:0; }
  .trip-template-modal{ width:100%; max-height:88vh; border-radius:24px 24px 0 0; padding:18px 16px calc(18px + env(safe-area-inset-bottom)); }
  .trip-template-includes{ grid-template-columns:1fr; }
  .trip-template-actions .btn{ flex:1; }
}


/* ===== PATCH: Share Trip Starter must open as a true modal popup ===== */
#trip-template-share-backdrop.trip-template-backdrop{
  position:fixed !important;
  inset:0 !important;
  z-index:2147483000 !important;
  width:100vw !important;
  height:100dvh !important;
  max-width:none !important;
  margin:0 !important;
  align-items:center !important;
  justify-content:center !important;
  background:rgba(15,23,42,.52) !important;
  -webkit-backdrop-filter:blur(8px) !important;
  backdrop-filter:blur(8px) !important;
  box-sizing:border-box !important;
}
#trip-template-share-backdrop .trip-template-modal{
  position:relative !important;
  width:min(560px, calc(100vw - 36px)) !important;
  max-width:560px !important;
  max-height:min(84dvh, 720px) !important;
  overflow:auto !important;
  border-radius:24px !important;
  transform:none !important;
}
body.trip-template-modal-open .mobile-tabbar{ display:none !important; }
@media (max-width:640px){
  #trip-template-share-backdrop.trip-template-backdrop{
    align-items:flex-end !important;
    padding:0 !important;
  }
  #trip-template-share-backdrop .trip-template-modal{
    width:100% !important;
    max-width:100% !important;
    max-height:88dvh !important;
    border-radius:24px 24px 0 0 !important;
  }
}


/* ===== PATCH: Share Trip Starter follows light/dark theme + privacy-safe modal styling ===== */
#trip-template-share-backdrop .trip-template-modal,
#trip-template-import-backdrop .trip-template-modal{
  background:var(--card-bg) !important;
  color:var(--text) !important;
  border:1px solid var(--card-border) !important;
  box-shadow:var(--card-shadow), 0 24px 80px rgba(2,6,23,.32) !important;
}
#trip-template-share-backdrop .trip-template-copy,
#trip-template-share-backdrop .trip-template-meta,
#trip-template-share-backdrop .trip-template-kicker,
#trip-template-import-backdrop .trip-template-copy,
#trip-template-import-backdrop .trip-template-meta,
#trip-template-import-backdrop .trip-template-kicker{
  color:var(--muted) !important;
}
#trip-template-share-backdrop .trip-template-includes > div,
#trip-template-import-backdrop .trip-template-includes > div{
  background:var(--row-bg) !important;
  border-color:var(--card-border) !important;
  color:var(--text) !important;
}
#trip-template-share-backdrop .trip-template-link,
#trip-template-import-backdrop .trip-template-import-input{
  background:var(--input-bg) !important;
  color:var(--text) !important;
  border-color:var(--card-border) !important;
}
#trip-template-share-backdrop .trip-template-close,
#trip-template-share-backdrop .trip-template-cancel,
#trip-template-import-backdrop .trip-template-close,
#trip-template-import-backdrop .trip-template-cancel{
  background:var(--chip-bg) !important;
  color:var(--text) !important;
  border-color:var(--card-border) !important;
}
body.light #trip-template-share-backdrop.trip-template-backdrop,
body.light #trip-template-import-backdrop.trip-template-backdrop{
  background:rgba(15,23,42,.30) !important;
}
body:not(.light) #trip-template-share-backdrop.trip-template-backdrop,
body:not(.light) #trip-template-import-backdrop.trip-template-backdrop{
  background:rgba(2,6,23,.66) !important;
}

/* ===== PATCH: Protected Trip Starter Library ===== */
.trip-template-password,
.trip-starter-password-input{
  width:100%;
  min-height:42px;
  border-radius:14px;
  border:1px solid var(--card-border, rgba(148,163,184,.35));
  background:var(--input-bg, var(--card-bg, #fff));
  color:var(--text, #0f172a);
  padding:10px 12px;
  box-sizing:border-box;
}
.trip-template-copy.small{font-size:.88rem; opacity:.82; margin-top:6px;}
.trip-template-divider{border:0; border-top:1px solid var(--card-border, rgba(148,163,184,.25)); margin:14px 0;}
.trip-starter-library-list{display:grid; gap:10px; margin:12px 0; max-height:340px; overflow:auto; padding-right:2px;}
.trip-starter-library-card{
  border:1px solid var(--card-border, rgba(148,163,184,.35));
  background:var(--card-bg, #fff);
  color:var(--text, #0f172a);
  border-radius:18px;
  padding:12px;
  box-shadow:0 10px 28px rgba(15,23,42,.08);
}
.trip-starter-library-card.is-focused{outline:2px solid var(--accent, #2563eb); outline-offset:2px;}
.trip-starter-library-title{font-weight:800; font-size:1rem; margin-bottom:3px;}
.trip-starter-library-meta{font-size:.88rem; opacity:.82;}
.trip-starter-library-route{font-size:.82rem; opacity:.72; margin-top:5px; line-height:1.35;}
.trip-starter-unlock-row{display:grid; grid-template-columns:1fr auto; gap:8px; margin-top:10px; align-items:center;}
.trip-starter-card-error,.trip-template-error{color:#b91c1c; background:rgba(248,113,113,.12); border:1px solid rgba(248,113,113,.35); border-radius:12px; padding:8px 10px; margin-top:8px; font-size:.88rem;}
.trip-template-empty{border:1px dashed var(--card-border, rgba(148,163,184,.45)); border-radius:16px; padding:14px; opacity:.75; text-align:center;}
@media (max-width:640px){
  .trip-starter-unlock-row{grid-template-columns:1fr;}
  .trip-template-actions{gap:8px; flex-wrap:wrap;}
  .trip-template-actions .btn{flex:1 1 auto;}
}

/* Protected Trip Starter Library remove-share action */
.trip-starter-delete-btn{
  color:var(--danger, #dc2626);
  border-color:rgba(220,38,38,.28);
  background:rgba(220,38,38,.08);
}
.trip-starter-delete-btn:hover{
  background:rgba(220,38,38,.14);
}
@media (min-width: 641px){
  .trip-starter-unlock-row:has(.trip-starter-delete-btn){
    grid-template-columns:1fr auto auto;
  }
}

/* Share Trip Starter remove action */
.trip-template-remove-protected-btn{
  color:#b42318;
  border-color:rgba(244,63,94,.35);
  background:rgba(244,63,94,.08);
}
body.dark .trip-template-remove-protected-btn,
.dark .trip-template-remove-protected-btn{
  color:#fecaca;
  border-color:rgba(248,113,113,.35);
  background:rgba(127,29,29,.28);
}
.trip-template-remove-protected-btn:hover{ filter:brightness(.98); }

/* Change Password modal */
.change-password-backdrop{
  position:fixed; inset:0; z-index:10050;
  display:none; align-items:center; justify-content:center;
  padding:22px;
  background:rgba(15,23,42,.42);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.change-password-modal{
  width:min(520px, 100%);
  max-height:min(88vh, 720px);
  overflow:auto;
  border-radius:26px;
  padding:20px;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(148,163,184,.55);
  box-shadow:0 24px 70px rgba(15,23,42,.26);
  color:#071024;
}
body.dark .change-password-modal,
.dark .change-password-modal{
  background:linear-gradient(145deg, rgba(15,23,42,.98), rgba(30,41,59,.96));
  border-color:rgba(148,163,184,.32);
  color:#f8fafc;
}
.change-password-header{display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:14px;}
.change-password-header h3{margin:0; font-size:1.55rem; line-height:1.1;}
.change-password-header p{margin:8px 0 0; color:#64748b; font-weight:700;}
body.dark .change-password-header p,
.dark .change-password-header p{color:#cbd5e1;}
.change-password-body{display:grid; gap:9px;}
.change-password-label{font-weight:900; color:#475569; letter-spacing:.04em; font-size:.82rem; text-transform:uppercase; margin-top:8px;}
body.dark .change-password-label,
.dark .change-password-label{color:#cbd5e1;}
.change-password-input{
  width:100%; box-sizing:border-box;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.72);
  padding:13px 14px;
  font:inherit;
  font-weight:800;
  background:rgba(255,255,255,.9);
  color:#071024;
  outline:none;
}
.change-password-input:focus{border-color:#38bdf8; box-shadow:0 0 0 4px rgba(56,189,248,.16);}
body.dark .change-password-input,
.dark .change-password-input{background:rgba(15,23,42,.72); border-color:rgba(148,163,184,.42); color:#f8fafc;}
.change-password-message{min-height:24px; font-weight:900; margin-top:6px;}
.change-password-message.error{color:#dc2626;}
.change-password-message.success{color:#16a34a;}
.change-password-message.info{color:#0284c7;}
.change-password-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:16px; flex-wrap:wrap;}
@media (max-width: 640px){
  .change-password-backdrop{align-items:flex-end; padding:0;}
  .change-password-modal{width:100%; max-height:88vh; border-radius:28px 28px 0 0; padding:20px max(18px, env(safe-area-inset-left)) calc(20px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-right));}
  .change-password-actions .btn{flex:1 1 auto;}
}

/* Tab-focus login/logout sync toast */
.triptracker-focus-toast{
  position: fixed;
  left: 50%;
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(16px);
  z-index: 1000000;
  opacity: 0;
  pointer-events: none;
  max-width: min(92vw, 460px);
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.35);
  background: rgba(15,23,42,.92);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 20px 45px rgba(15,23,42,.28);
  transition: opacity .22s ease, transform .22s ease;
}
.triptracker-focus-toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.triptracker-focus-toast.ok{ background: rgba(16,185,129,.95); }
.triptracker-focus-toast.warn{ background: rgba(245,158,11,.96); }
body.dark .triptracker-focus-toast,
html.dark .triptracker-focus-toast{
  border-color: rgba(255,255,255,.16);
  background: rgba(2,6,23,.94);
}


/* === MyVoyageBoard patch: visible labels for iPhone time inputs === */
.planner-field{
  display:flex;
  flex-direction:column;
  gap:5px;
  width:100%;
  min-width:0;
}
.planner-field > span{
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  padding-left:4px;
  line-height:1.1;
}
.planner-field > input,
.planner-field > select{
  width:100%;
  min-width:0;
  box-sizing:border-box;
}
.planner-add .planner-field,
.agenda-edit-grid .planner-field,
.exc-edit-grid .planner-field{
  margin:0;
}
@media (max-width:600px){
  .planner-field > span{ font-size:.76rem; }
  .planner-field > input[type="time"]{ min-height:48px; }
}

/* Daily Agenda calendar export polish */
.planner-section-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0 0 10px;
}
.planner-section-title-row h4{ margin:0; }
.planner-ag-export-all{
  font-size:.72rem;
  padding:6px 10px;
  border-radius:999px;
  white-space:nowrap;
}
.icon-btn.agenda-cal{
  color:var(--accent);
}
@media (max-width:520px){
  .planner-section-title-row{
    align-items:flex-start;
    flex-direction:column;
  }
  .planner-ag-export-all{
    width:100%;
  }
}

/* Global unsaved modal guard */
.tt-unsaved-confirm-overlay{
  position:fixed;
  inset:0;
  z-index:99999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(15,23,42,.58);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  overscroll-behavior:contain;
  touch-action:none;
}
.tt-unsaved-confirm-card{
  width:min(430px, 94vw);
  border-radius:22px;
  padding:20px;
  background:var(--surface, #111827);
  color:var(--text, #f8fafc);
  border:1px solid var(--surface-border, rgba(148,163,184,.25));
  box-shadow:0 24px 70px rgba(0,0,0,.38);
  text-align:left;
}
body.light .tt-unsaved-confirm-card,
.light .tt-unsaved-confirm-card{
  background:#ffffff;
  color:#0f172a;
  border-color:rgba(15,23,42,.12);
  box-shadow:0 24px 70px rgba(15,23,42,.22);
}
.tt-unsaved-confirm-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:rgba(245,158,11,.14);
  margin-bottom:10px;
}
.tt-unsaved-confirm-card h3{
  margin:0 0 6px;
  font-size:1.15rem;
}
.tt-unsaved-confirm-card p{
  margin:0;
  color:var(--muted, #94a3b8);
  line-height:1.45;
}
body.light .tt-unsaved-confirm-card p,
.light .tt-unsaved-confirm-card p{ color:#64748b; }
.tt-unsaved-confirm-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:18px;
  flex-wrap:wrap;
}
@media (max-width: 640px){
  .tt-unsaved-confirm-overlay{ align-items:flex-end; padding:12px; }
  .tt-unsaved-confirm-card{ width:100%; border-radius:22px 22px max(22px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-bottom)); padding-bottom:calc(18px + env(safe-area-inset-bottom)); }
  .tt-unsaved-confirm-actions{ display:grid; grid-template-columns:1fr; }
  .tt-unsaved-confirm-actions .btn{ width:100%; }
}

#trip-modal-backdrop,
.trip-template-backdrop,
.copy-modal,
.status-help-overlay,
.port-trips-modal-overlay,
.timeline-modal{
  overscroll-behavior:contain;
}


/* =========================================================
   REAL FIX: Mobile / Android More menu must scroll by itself
   - Keeps the bottom tab bar visible
   - Prevents the page behind it from scrolling
   - Uses dvh for Android/PWA viewport bugs
   ========================================================= */
html.tt-more-open,
body.tt-more-open{
  overflow: hidden !important;
  height: 100% !important;
  touch-action: none !important;
}

#mobile-more-backdrop.mobile-more-backdrop{
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  display: none;
  align-items: stretch !important;
  justify-content: center !important;
  background: rgba(2, 6, 23, .62) !important;
  padding:
    calc(10px + env(safe-area-inset-top))
    12px
    calc(92px + env(safe-area-inset-bottom))
    12px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#mobile-more-backdrop.mobile-more-backdrop.tt-open{
  display: flex !important;
}

#mobile-more-backdrop .mobile-more-sheet{
  width: min(560px, 100%) !important;
  max-height: 100% !important;
  height: auto !important;
  align-self: stretch !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: 20px !important;
  box-sizing: border-box !important;
}

#mobile-more-backdrop .mobile-more-hdr{
  flex: 0 0 auto !important;
}

#mobile-more-backdrop .mobile-more-sections{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  padding: 12px 12px 18px !important;
  scroll-padding-bottom: 120px !important;
}

#mobile-more-backdrop .mobile-more-foot{
  flex: 0 0 auto !important;
  padding: 8px 12px 12px !important;
}

#mobile-more-backdrop .mobile-more-grid{
  padding: 0 !important;
}

@media (max-width: 430px){
  #mobile-more-backdrop.mobile-more-backdrop{
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  #mobile-more-backdrop .mobile-more-grid{
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   REPATCH: Mobile More sheet scroll restore
   This wins over older More menu rules and lets the sheet scroll
   while keeping the bottom tab bar visible.
   ========================================================= */
html.tt-more-open,
body.tt-more-open{
  overflow:hidden !important;
  height:100% !important;
}
#mobile-more-backdrop.mobile-more-backdrop{
  position:fixed !important;
  inset:0 !important;
  z-index:99999 !important;
  display:none !important;
  align-items:stretch !important;
  justify-content:center !important;
  padding:calc(10px + env(safe-area-inset-top)) 12px calc(92px + env(safe-area-inset-bottom)) 12px !important;
  background:rgba(2,6,23,.62) !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
  overscroll-behavior:contain !important;
}

#mobile-more-backdrop .mobile-more-sheet{
  width:min(560px,100%) !important;
  height:100% !important;
  max-height:100% !important;
  min-height:0 !important;
  margin:0 auto !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
  border-radius:22px !important;
  box-sizing:border-box !important;
}

#mobile-more-backdrop .mobile-more-sections{
  flex:1 1 auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior:contain !important;
  padding:12px 12px calc(24px + env(safe-area-inset-bottom)) !important;
  scroll-padding-bottom:130px !important;
}

@supports (height: 100dvh){
  #mobile-more-backdrop.mobile-more-backdrop{ height:100dvh !important; }
}
@media (max-width:430px){
  
  
}

/* =========================================================
   FINAL REPATCH: Android More menu scroll restore
   Keeps the full More sheet reachable on Android/PWA while
   preserving screenshot bug-report pipeline changes.
   ========================================================= */
html.tt-more-open,
body.tt-more-open{
  overflow:hidden !important;
  height:100% !important;
  max-height:100% !important;
  touch-action:auto !important;
}









#mobile-more-backdrop .mobile-more-sections{
  flex:1 1 auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow-y:scroll !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior:contain !important;
  touch-action:pan-y !important;
  padding:12px 12px calc(30px + env(safe-area-inset-bottom)) !important;
  scroll-padding-bottom:140px !important;
}



@supports not (height: 100dvh){
  
}

@media (max-width:430px){
  
  
}


/* =========================================================
   MyVoyageBoard unified navigation polish
   Keeps index, changelog, profile, share, and utility pages feeling related.
   ========================================================= */
.mvb-unified-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.mvb-unified-brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.mvb-unified-brand img{
  width:42px;
  height:42px;
  border-radius:13px;
  box-shadow:0 10px 24px rgba(34,174,234,.22);
  flex:0 0 auto;
}
.mvb-unified-brand-title{
  font-weight:850;
  letter-spacing:-.025em;
  line-height:1.05;
  color:var(--text);
}
.mvb-unified-brand-sub{
  color:var(--muted);
  font-size:.82rem;
  margin-top:2px;
}
.mvb-unified-links{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}
.mvb-unified-links .tab-btn,
.mvb-unified-links a.tab-btn{
  text-decoration:none;
  white-space:nowrap;
}
@media (max-width:760px){
  .mvb-unified-nav{ align-items:stretch; }
  .mvb-unified-brand{ width:100%; }
  .mvb-unified-links{
    width:100%;
    justify-content:flex-start;
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:3px;
    scrollbar-width:none;
  }
  .mvb-unified-links::-webkit-scrollbar{ display:none; }
  .mvb-unified-links .tab-btn{ flex:0 0 auto; }
}

/* Android/iOS More menu: keep header/footer fixed and make middle scrollable. */
html.tt-more-open,
body.tt-more-open{
  overflow:hidden !important;
  overscroll-behavior:none !important;
}
#mobile-more-backdrop.mobile-more-backdrop{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  height:100dvh !important;
  z-index:99999 !important;
  display:none !important;
  align-items:flex-start !important;
  justify-content:center !important;
  padding:calc(10px + env(safe-area-inset-top)) 12px calc(88px + env(safe-area-inset-bottom)) 12px !important;
  overflow:hidden !important;
  overscroll-behavior:contain !important;
  box-sizing:border-box !important;
  touch-action:none !important;
}

#mobile-more-backdrop .mobile-more-sheet{
  width:min(560px, 100%) !important;
  height:calc(100dvh - 108px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  max-height:calc(100dvh - 108px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  min-height:0 !important;
  margin:0 auto !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
  touch-action:auto !important;
}
#mobile-more-backdrop .mobile-more-hdr,
#mobile-more-backdrop .mobile-more-foot{ flex:0 0 auto !important; }
#mobile-more-backdrop .mobile-more-sections{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior:contain !important;
  touch-action:pan-y !important;
  padding:12px 12px calc(34px + env(safe-area-inset-bottom)) !important;
  scroll-padding-bottom:140px !important;
}
#mobile-more-backdrop .mobile-more-grid{ padding:0 !important; }
@supports not (height: 100dvh){
  #mobile-more-backdrop .mobile-more-sheet{
    height:calc(100vh - 108px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    max-height:calc(100vh - 108px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  }
}
@media (max-width:430px){
  #mobile-more-backdrop.mobile-more-backdrop{ padding-left:10px !important; padding-right:10px !important; }
  #mobile-more-backdrop .mobile-more-grid{ grid-template-columns:1fr !important; }
}


/* =========================================================
   ANDROID PWA MORE MENU HARD FIX — 2026-05-11
   The Android installed-web-app viewport can preserve the inner
   sheet scroll position after opening tools like Notification Settings.
   This final rule set makes the More sheet a fixed, app-style panel:
   top-safe-area header, scroll-only middle area, and bottom tabbar space.
========================================================= */
html.tt-more-open,
body.tt-more-open{
  overflow:hidden !important;
  height:100% !important;
  max-height:100% !important;
  overscroll-behavior:none !important;
}

#mobile-more-backdrop.mobile-more-backdrop{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  height:100dvh !important;
  z-index:99999 !important;
  display:none !important;
  align-items:stretch !important;
  justify-content:center !important;
  padding:calc(8px + env(safe-area-inset-top)) 10px calc(78px + env(safe-area-inset-bottom)) 10px !important;
  overflow:hidden !important;
  background:rgba(2,6,23,.66) !important;
  box-sizing:border-box !important;
  touch-action:none !important;
}

#mobile-more-backdrop.mobile-more-backdrop.tt-open{
  display:flex !important;
}

#mobile-more-backdrop .mobile-more-sheet{
  width:min(560px,100%) !important;
  height:100% !important;
  max-height:100% !important;
  min-height:0 !important;
  margin:0 auto !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
  border-radius:22px !important;
  box-sizing:border-box !important;
  touch-action:auto !important;
  transform:none !important;
}

#mobile-more-backdrop .mobile-more-hdr{
  flex:0 0 auto !important;
  position:relative !important;
  z-index:2 !important;
}

#mobile-more-backdrop .mobile-more-sections{
  flex:1 1 auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior:contain !important;
  touch-action:pan-y !important;
  padding:12px 12px calc(24px + env(safe-area-inset-bottom)) !important;
  scroll-padding-top:12px !important;
  scroll-padding-bottom:120px !important;
  scroll-behavior:auto !important;
}

#mobile-more-backdrop .mobile-more-foot{
  display:none !important;
}

#mobile-more-backdrop .mobile-more-section{
  scroll-margin-top:12px !important;
}

#mobile-more-backdrop .mobile-more-grid{
  grid-template-columns:1fr !important;
  padding:0 !important;
  gap:10px !important;
}

#mobile-more-backdrop .mobile-more-grid .btn{
  width:100% !important;
  min-height:48px !important;
}

@supports not (height:100dvh){
  #mobile-more-backdrop.mobile-more-backdrop{
    height:100vh !important;
  }
}


/* Splash follows saved light/dark theme */
.mvb-splash-light .splash-screen,
.mvb-splash-light #splash-screen,
.mvb-splash-light .app-splash,
.mvb-splash-light .login-splash,
.splash-screen.mvb-splash-light,
#splash-screen.mvb-splash-light{
  background:linear-gradient(180deg,#f7fbff 0%,#eaf7ff 54%,#ffffff 100%) !important;
  color:#071225 !important;
}

.mvb-splash-dark .splash-screen,
.mvb-splash-dark #splash-screen,
.mvb-splash-dark .app-splash,
.mvb-splash-dark .login-splash,
.splash-screen.mvb-splash-dark,
#splash-screen.mvb-splash-dark{
  background:linear-gradient(180deg,#061425 0%,#08233f 58%,#061425 100%) !important;
  color:#f8fafc !important;
}

/* Voyage hero card */
.mvb-voyage-hero-wrap{
  display:grid !important;
  grid-template-columns:300px minmax(0,1fr) !important;
  align-items:stretch !important;
  width:100% !important;
  overflow:hidden !important;
  border:1px solid rgba(148,163,184,.30) !important;
  border-radius:22px !important;
  background:var(--surface,#fff) !important;
  box-shadow:0 14px 34px rgba(15,35,60,.08) !important;
  margin:12px 0 12px !important;
}

.mvb-voyage-countdown-panel{
  display:flex !important;
  align-items:center !important;
  min-height:150px !important;
  padding:22px 24px !important;
  background:linear-gradient(135deg,rgba(224,247,255,.96),rgba(247,251,255,.96)) !important;
  border-right:1px solid rgba(148,163,184,.24) !important;
}

.mvb-voyage-countdown-main{
  display:grid !important;
  gap:7px !important;
  min-width:0 !important;
}

.mvb-voyage-countdown-value{
  font-weight:950 !important;
  font-size:clamp(1.55rem,2.35vw,2.05rem) !important;
  letter-spacing:-.045em !important;
  color:var(--text,#081426) !important;
  line-height:1.05 !important;
  font-variant-numeric:tabular-nums !important;
}

.mvb-voyage-countdown-date{
  display:inline-flex !important;
  align-items:center !important;
  width:max-content !important;
  max-width:100% !important;
  padding:6px 10px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.72) !important;
  color:var(--text,#081426) !important;
  border:1px solid rgba(15,39,66,.14) !important;
  font-size:.92rem !important;
  font-weight:850 !important;
  white-space:normal !important;
}

.mvb-voyage-countdown-label{
  color:var(--muted,#516073) !important;
  font-weight:750 !important;
  font-size:.95rem !important;
  line-height:1.25 !important;
}

.mvb-voyage-hero-wrap > .voyage-card-hero,
.mvb-voyage-hero-wrap > .voyage-hero-strip,
.mvb-voyage-hero-wrap > .trip-hero-strip,
.mvb-voyage-hero-wrap > .ship-hero-strip,
.mvb-voyage-hero-wrap > .mvb-voyage-hero-strip{
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  min-height:150px !important;
  width:100% !important;
  background-image:
    linear-gradient(90deg,rgba(240,249,255,.98) 0%,rgba(240,249,255,.76) 34%,rgba(240,249,255,.18) 72%),
    url("/ship-photo/default-hero.png") !important;
  background-size:contain !important;
  background-position:right center !important;
  background-color:transparent !important;
  padding-right:18px !important;
}

.mvb-completed-voyage-hero .mvb-voyage-countdown-panel{
  background:linear-gradient(135deg,rgba(236,253,245,.95),rgba(240,249,255,.95)) !important;
}

body:not(.light) .mvb-voyage-countdown-panel{
  background:linear-gradient(135deg,rgba(12,36,64,.96),rgba(15,42,72,.92)) !important;
}

body:not(.light) .mvb-voyage-countdown-date{
  background:rgba(255,255,255,.12) !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.18) !important;
}

body:not(.light) .mvb-voyage-hero-wrap > .voyage-card-hero,
body:not(.light) .mvb-voyage-hero-wrap > .voyage-hero-strip,
body:not(.light) .mvb-voyage-hero-wrap > .trip-hero-strip,
body:not(.light) .mvb-voyage-hero-wrap > .ship-hero-strip,
body:not(.light) .mvb-voyage-hero-wrap > .mvb-voyage-hero-strip{
  background-image:
    linear-gradient(90deg,rgba(6,20,37,.92) 0%,rgba(6,20,37,.68) 38%,rgba(6,20,37,.20) 74%),
    url("/ship-photo/default-hero.png") !important;
}

@media (max-width:760px){
  .mvb-voyage-hero-wrap{
    grid-template-columns:1fr !important;
  }

  .mvb-voyage-countdown-panel{
    min-height:auto !important;
    padding:18px !important;
    border-right:0 !important;
    border-bottom:1px solid rgba(148,163,184,.24) !important;
  }

  .mvb-voyage-countdown-value{
    font-size:clamp(1.45rem,7vw,2rem) !important;
    white-space:normal !important;
  }

  .mvb-voyage-hero-wrap > .voyage-card-hero,
  .mvb-voyage-hero-wrap > .voyage-hero-strip,
  .mvb-voyage-hero-wrap > .trip-hero-strip,
  .mvb-voyage-hero-wrap > .ship-hero-strip,
  .mvb-voyage-hero-wrap > .mvb-voyage-hero-strip{
    min-height:165px !important;
  }
}


/* Main More menu tap/click fix
   Keeps the main More sheet above splash/hero layers and makes menu buttons clickable. */

/* Any splash/loading layer that has already been hidden should never catch taps */
.splash-screen[hidden],
#splash-screen[hidden],
.app-splash[hidden],
.login-splash[hidden],
.splash[hidden],
.splash-screen.is-hidden,
#splash-screen.is-hidden,
.app-splash.is-hidden,
.login-splash.is-hidden,
.splash.is-hidden,
.splash-screen.hidden,
#splash-screen.hidden,
.app-splash.hidden,
.login-splash.hidden,
.splash.hidden{
  pointer-events:none !important;
  display:none !important;
}

/* If a splash layer is faded out by opacity, do not let it block the app */
.splash-screen[style*="opacity: 0"],
#splash-screen[style*="opacity: 0"],
.app-splash[style*="opacity: 0"],
.login-splash[style*="opacity: 0"],
.splash[style*="opacity: 0"]{
  pointer-events:none !important;
}

/* Main More / nav sheet should be the top interactive layer */
.more-menu,
.main-more-menu,
.mobile-more-menu,
.app-more-menu,
.more-sheet,
.main-more-sheet,
.mobile-more-sheet,
.menu-sheet,
.nav-more-sheet,
.more-backdrop,
.menu-backdrop,
.nav-backdrop,
[class*="more-menu"],
[class*="more-sheet"],
[class*="menu-sheet"]{
  z-index:2147483200 !important;
  pointer-events:auto !important;
}

/* Buttons/links inside the main More menu must receive taps */
.more-menu button,
.more-menu a,
.more-menu [role="button"],
.main-more-menu button,
.main-more-menu a,
.main-more-menu [role="button"],
.mobile-more-menu button,
.mobile-more-menu a,
.mobile-more-menu [role="button"],
.app-more-menu button,
.app-more-menu a,
.app-more-menu [role="button"],
.more-sheet button,
.more-sheet a,
.more-sheet [role="button"],
.main-more-sheet button,
.main-more-sheet a,
.main-more-sheet [role="button"],
.mobile-more-sheet button,
.mobile-more-sheet a,
.mobile-more-sheet [role="button"],
.menu-sheet button,
.menu-sheet a,
.menu-sheet [role="button"],
.nav-more-sheet button,
.nav-more-sheet a,
.nav-more-sheet [role="button"],
[class*="more-menu"] button,
[class*="more-menu"] a,
[class*="more-menu"] [role="button"],
[class*="more-sheet"] button,
[class*="more-sheet"] a,
[class*="more-sheet"] [role="button"],
[class*="menu-sheet"] button,
[class*="menu-sheet"] a,
[class*="menu-sheet"] [role="button"]{
  pointer-events:auto !important;
  touch-action:manipulation !important;
}

/* Hero cards should never overlay open menus */
.mvb-voyage-hero-wrap,
.mvb-voyage-hero-wrap *{
  z-index:auto;
}

body.mvb-main-more-open .mvb-voyage-hero-wrap{
  pointer-events:none !important;
}











/* Photo hero using the existing voyage card markup */
.mvb-photo-hero-card{
  overflow:hidden !important;
}

.mvb-existing-photo-hero{
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate !important;
  min-height:160px !important;
  border-radius:22px 22px 0 0 !important;
  border-bottom:1px solid rgba(148,163,184,.22) !important;
  background-color:#eaf7ff !important;
  background-image:
    linear-gradient(90deg,
      rgba(240,249,255,.98) 0%,
      rgba(240,249,255,.90) 31%,
      rgba(240,249,255,.48) 56%,
      rgba(240,249,255,.06) 100%),
    url("/ship-photo/default-hero.png") !important;
  background-repeat:no-repeat !important;
  background-size:contain !important;
  background-position:right center !important;
  background-color:transparent !important;
  padding-right:18px !important;
}

.mvb-existing-photo-hero::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:-1 !important;
  pointer-events:none !important;
  background:
    radial-gradient(circle at 72% 48%, rgba(255,255,255,0) 0%, rgba(255,255,255,.08) 35%, rgba(255,255,255,.38) 76%),
    linear-gradient(90deg, rgba(255,255,255,.40) 0%, rgba(255,255,255,.12) 45%, rgba(255,255,255,0) 100%) !important;
}

/* Make chips/text sit over the photo nicely */
.mvb-existing-photo-hero > *{
  position:relative !important;
  z-index:2 !important;
}

.mvb-existing-photo-hero .pill,
.mvb-existing-photo-hero .chip,
.mvb-existing-photo-hero .badge,
.mvb-existing-photo-hero [class*="pill"],
.mvb-existing-photo-hero [class*="chip"],
.mvb-existing-photo-hero [class*="badge"]{
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
  background:rgba(255,255,255,.76) !important;
  border-color:rgba(15,39,66,.16) !important;
}

.mvb-existing-ship-label{
  display:inline-flex !important;
  align-items:center !important;
  width:max-content !important;
  max-width:100% !important;
  padding:7px 12px !important;
  margin:10px 0 0 0 !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.78) !important;
  border:1px solid rgba(15,39,66,.16) !important;
  font-weight:900 !important;
  color:#071225 !important;
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
}

body:not(.light) .mvb-existing-photo-hero{
  background-color:#071426 !important;
  background-image:
    linear-gradient(90deg,
      rgba(6,20,37,.96) 0%,
      rgba(6,20,37,.78) 34%,
      rgba(6,20,37,.34) 64%,
      rgba(6,20,37,.08) 100%),
    url("/ship-photo/default-hero.png") !important;
}

body:not(.light) .mvb-existing-photo-hero::before{
  background:
    radial-gradient(circle at 72% 48%, rgba(0,0,0,0) 0%, rgba(0,0,0,.08) 40%, rgba(0,0,0,.30) 100%),
    linear-gradient(90deg, rgba(0,0,0,.32) 0%, rgba(0,0,0,.10) 50%, rgba(0,0,0,0) 100%) !important;
}

body:not(.light) .mvb-existing-photo-hero .pill,
body:not(.light) .mvb-existing-photo-hero .chip,
body:not(.light) .mvb-existing-photo-hero .badge,
body:not(.light) .mvb-existing-photo-hero [class*="pill"],
body:not(.light) .mvb-existing-photo-hero [class*="chip"],
body:not(.light) .mvb-existing-photo-hero [class*="badge"],
body:not(.light) .mvb-existing-ship-label{
  background:rgba(15,23,42,.62) !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.18) !important;
}

@media (max-width:760px){
  .mvb-existing-photo-hero{
    min-height:330px !important;
    background-image:
      linear-gradient(180deg,
        rgba(240,249,255,.96) 0%,
        rgba(240,249,255,.74) 42%,
        rgba(240,249,255,.16) 100%),
      url("/ship-photo/default-hero.png") !important;
    background-size:cover !important;
    background-position:center bottom !important;
  }

  body:not(.light) .mvb-existing-photo-hero{
    background-image:
      linear-gradient(180deg,
        rgba(6,20,37,.94) 0%,
        rgba(6,20,37,.70) 46%,
        rgba(6,20,37,.18) 100%),
      url("/ship-photo/default-hero.png") !important;
  }
}



/* Hero cleanup: lower countdown, separate ship/cabin, remove duplicate round image */
.mvb-existing-photo-hero{
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-end !important;
  gap:10px !important;
  padding:26px 18px 18px !important;
}

/* Push countdown block down from the very top */
.mvb-existing-photo-hero > :first-child,
.mvb-existing-photo-hero [class*="countdown"],
.mvb-existing-photo-hero [class*="timer"],
.mvb-existing-photo-hero [class*="time"]{
  margin-top:22px !important;
}

/* Hide duplicate label that caused Norwegian VivaInside */
.mvb-existing-ship-label{
  display:none !important;
}

/* Remove the extra round/oval photo block under the action buttons */
.mvb-photo-hero-card > aside .mvb-existing-photo-hero,
.mvb-photo-hero-card > aside [data-mvb-existing-photo-hero],
.mvb-photo-hero-card > .trip-actions-under-hero ~ .mvb-existing-photo-hero,
.mvb-photo-hero-card > .trip-actions ~ .mvb-existing-photo-hero,
.mvb-photo-hero-card > .voyage-actions ~ .mvb-existing-photo-hero{
  display:none !important;
}

/* Only the first top photo hero should be visible */
.mvb-photo-hero-card .mvb-existing-photo-hero + .mvb-existing-photo-hero{
  display:none !important;
}

/* Keep ship and cabin/class chips visually separate */
.mvb-existing-photo-hero .pill,
.mvb-existing-photo-hero .chip,
.mvb-existing-photo-hero .badge,
.mvb-existing-photo-hero [class*="pill"],
.mvb-existing-photo-hero [class*="chip"],
.mvb-existing-photo-hero [class*="badge"]{
  margin-right:6px !important;
  margin-bottom:6px !important;
  white-space:nowrap !important;
}

/* Make any text inside the photo hero wrap instead of gluing words together */
.mvb-existing-photo-hero *{
  word-break:normal !important;
  overflow-wrap:normal !important;
}


/* Remove ship image behind action buttons ONLY */
.trip-actions,
.voyage-actions,
[class*="trip-action"],
[class*="voyage-action"]{
    background:none !important;
    background-image:none !important;
}

/* remove duplicate photo panel on right side */
.trip-actions .hero-card,
.trip-actions .trip-hero,
.trip-actions .voyage-hero,
.voyage-actions .hero-card,
.voyage-actions .trip-hero,
.voyage-actions .voyage-hero{
    display:none !important;
}

/* keep main hero visible */
.hero-card,
.trip-hero,
.voyage-hero,
[class*="hero-photo"]{
    display:block !important;
}


/* MVB fixed renderer hero layout */
.trip-row.mvb-renderer-trip-row{
  display:block !important;
  overflow:hidden !important;
  padding:0 !important;
}

.trip-row.mvb-renderer-trip-row > .mvb-renderer-hero{
  display:grid !important;
  grid-template-columns:minmax(300px, 38%) minmax(0, 1fr) !important;
  width:100% !important;
  min-height:230px !important;
  overflow:hidden !important;
  border-radius:22px 22px 0 0 !important;
  border-bottom:1px solid rgba(148,163,184,.22) !important;
  background:linear-gradient(135deg, rgba(240,249,255,.98), rgba(255,255,255,.94)) !important;
}

.trip-row.mvb-renderer-trip-row > .mvb-renderer-hero .mvb-renderer-hero-copy{
  position:relative !important;
  z-index:2 !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  gap:10px !important;
  padding:30px 32px !important;
  background:linear-gradient(90deg, rgba(240,249,255,.98), rgba(240,249,255,.72) 78%, rgba(240,249,255,0)) !important;
  color:#071225 !important;
}

.trip-row.mvb-renderer-trip-row .mvb-hero-kicker{
  font-size:clamp(1.25rem, 2.1vw, 1.9rem) !important;
  line-height:1.08 !important;
  font-weight:950 !important;
  letter-spacing:-.045em !important;
}

.trip-row.mvb-renderer-trip-row .mvb-hero-countdown .countdown{
  font-size:clamp(1.9rem, 3vw, 2.7rem) !important;
  line-height:1.02 !important;
  font-weight:950 !important;
  letter-spacing:-.055em !important;
  font-variant-numeric:tabular-nums !important;
}

.trip-row.mvb-renderer-trip-row .mvb-hero-date,
.trip-row.mvb-renderer-trip-row .mvb-hero-line,
.trip-row.mvb-renderer-trip-row .mvb-hero-sub{
  font-size:1.02rem !important;
  font-weight:850 !important;
  line-height:1.25 !important;
}

.trip-row.mvb-renderer-trip-row .mvb-hero-sub{
  color:#334155 !important;
}

.trip-row.mvb-renderer-trip-row > .mvb-renderer-hero .mvb-renderer-hero-photo{
  display:block !important;
  min-height:230px !important;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.90) 0%, rgba(255,255,255,.46) 28%, rgba(255,255,255,.08) 72%),
    url("/ship-photo/default-hero.png") !important;
  background-size:contain !important;
  background-position:right center !important;
  background-color:transparent !important;
  padding-right:18px !important;
  background-repeat:no-repeat !important;
}

/* Action row directly under hero */
.trip-row.mvb-renderer-trip-row > .trip-actions{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
  align-items:center !important;
  width:100% !important;
  padding:12px 14px !important;
  background:transparent !important;
  background-image:none !important;
  border-bottom:1px solid rgba(148,163,184,.18) !important;
}

.trip-row.mvb-renderer-trip-row > .trip-actions::before,
.trip-row.mvb-renderer-trip-row > .trip-actions::after{
  display:none !important;
  content:none !important;
}

.trip-row.mvb-renderer-trip-row > .trip-actions .btn,
.trip-row.mvb-renderer-trip-row > .trip-actions button{
  flex:0 1 auto !important;
  min-width:118px !important;
  width:auto !important;
  min-height:40px !important;
  padding:9px 16px !important;
  border-radius:999px !important;
  background:#fff !important;
  background-image:none !important;
  border:1px solid rgba(148,163,184,.32) !important;
  box-shadow:none !important;
}

/* Details must sit below, not beside hero/actions */
.trip-row.mvb-renderer-trip-row > .trip-main{
  display:block !important;
  width:100% !important;
  background:none !important;
  background-image:none !important;
  padding:14px 16px 16px !important;
}



/* Ports button + popup */
.mvb-ports-call-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  border-radius:999px !important;
  white-space:nowrap !important;
  font-weight:850 !important;
}

.mvb-ports-popup-backdrop{
  position:fixed !important;
  inset:0 !important;
  z-index:2147483300 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:24px !important;
  background:rgba(15,23,42,.36) !important;
  backdrop-filter:blur(10px) !important;
  -webkit-backdrop-filter:blur(10px) !important;
}

.mvb-ports-popup{
  width:min(620px, calc(100vw - 36px)) !important;
  max-height:min(74vh, 720px) !important;
  overflow:hidden !important;
  border-radius:24px !important;
  background:#fff !important;
  color:#071225 !important;
  border:1px solid rgba(148,163,184,.38) !important;
  box-shadow:0 24px 80px rgba(15,23,42,.28) !important;
}

.mvb-ports-popup-head{
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  padding:20px 22px !important;
  border-bottom:1px solid rgba(148,163,184,.22) !important;
}

.mvb-ports-popup-head h2{
  margin:0 !important;
  font-size:1.3rem !important;
  font-weight:900 !important;
}

.mvb-ports-popup-close{
  width:44px !important;
  height:40px !important;
  border-radius:999px !important;
  border:1px solid rgba(148,163,184,.36) !important;
  background:#fff !important;
  color:#071225 !important;
  font-size:1.35rem !important;
}

.mvb-ports-popup-table{
  padding:16px 22px 22px !important;
  overflow:auto !important;
  max-height:calc(min(74vh, 720px) - 82px) !important;
}

.mvb-port-head,
.mvb-port-row{
  display:grid !important;
  grid-template-columns:52px minmax(0,1fr) 130px !important;
  gap:14px !important;
  align-items:center !important;
}

.mvb-port-head{
  color:#64748b !important;
  font-size:.82rem !important;
  font-weight:850 !important;
  padding:0 0 10px !important;
}



.mvb-port-row strong{
  font-weight:750 !important;
  color:#0f172a !important;
}



body:not(.light) .trip-row.mvb-renderer-trip-row > .mvb-renderer-hero .mvb-renderer-hero-copy{
  background:linear-gradient(90deg, rgba(15,23,42,.96), rgba(15,23,42,.68) 78%, rgba(15,23,42,0)) !important;
  color:#fff !important;
}

body:not(.light) .trip-row.mvb-renderer-trip-row .mvb-hero-sub{
  color:#cbd5e1 !important;
}

body:not(.light) .trip-row.mvb-renderer-trip-row > .mvb-renderer-hero .mvb-renderer-hero-photo{
  background-image:
    linear-gradient(90deg, rgba(15,23,42,.92) 0%, rgba(15,23,42,.48) 32%, rgba(15,23,42,.08) 74%),
    url("/ship-photo/default-hero.png") !important;
}

body:not(.light) .trip-row.mvb-renderer-trip-row > .trip-actions .btn,
body:not(.light) .trip-row.mvb-renderer-trip-row > .trip-actions button{
  background:rgba(15,23,42,.72) !important;
  color:#e5e7eb !important;
  border-color:rgba(255,255,255,.16) !important;
}







@media(max-width:760px){
  

  .trip-row.mvb-renderer-trip-row > .mvb-renderer-hero .mvb-renderer-hero-copy{
    padding:22px 20px !important;
    background:linear-gradient(180deg, rgba(240,249,255,.98), rgba(240,249,255,.76) 88%, rgba(240,249,255,0)) !important;
  }

  .trip-row.mvb-renderer-trip-row > .mvb-renderer-hero .mvb-renderer-hero-photo{
    min-height:190px !important;
    background-image:
      linear-gradient(180deg, rgba(255,255,255,.84) 0%, rgba(255,255,255,.34) 48%, rgba(255,255,255,.06) 100%),
      url("/ship-photo/default-hero.png") !important;
    background-position:center bottom !important;
  }

  .trip-row.mvb-renderer-trip-row > .trip-actions{
    gap:8px !important;
    padding:10px 12px !important;
  }

  .trip-row.mvb-renderer-trip-row > .trip-actions .btn,
  .trip-row.mvb-renderer-trip-row > .trip-actions button{
    flex:1 1 calc(50% - 8px) !important;
    min-width:0 !important;
  }

  .mvb-port-head,
  .mvb-port-row{
    grid-template-columns:42px minmax(0,1fr) 96px !important;
    gap:10px !important;
  }
}


/* MVB fix duplicate/missing details: only full voyage cards get hero layout */
.trip-row:not(.mvb-renderer-trip-row) > .mvb-renderer-hero{
  display:none !important;
}

.trip-row.mvb-renderer-trip-row > .trip-main{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}

.trip-row.mvb-renderer-trip-row > .trip-main .trip-name,
.trip-row.mvb-renderer-trip-row > .trip-main .trip-meta,
.trip-row.mvb-renderer-trip-row > .trip-main .trip-flights,
.trip-row.mvb-renderer-trip-row > .trip-main .trip-planner{
  display:revert !important;
  visibility:visible !important;
  opacity:1 !important;
}

.trip-row.mvb-renderer-trip-row > .trip-main .trip-meta{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px 10px !important;
  align-items:center !important;
}

/* remove old background image only from details, without hiding details */
.trip-row.mvb-renderer-trip-row > .trip-main,
.trip-row.mvb-renderer-trip-row > .trip-main::before,
.trip-row.mvb-renderer-trip-row > .trip-main::after{
  background:none !important;
  background-image:none !important;
}

.trip-row.mvb-renderer-trip-row > .trip-main *{
  background-image:none !important;
}

/* action row under hero, one clean row */
.trip-row.mvb-renderer-trip-row > .trip-actions{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:wrap !important;
  justify-content:flex-start !important;
  align-items:center !important;
  gap:10px !important;
  width:100% !important;
}

.trip-row.mvb-renderer-trip-row > .trip-actions .btn,
.trip-row.mvb-renderer-trip-row > .trip-actions button{
  display:inline-flex !important;
  width:auto !important;
  min-width:118px !important;
  flex:0 0 auto !important;
}


/* MVB clean details/info area below hero */
.trip-row.mvb-renderer-trip-row > .trip-main{
  background:transparent !important;
  padding:16px 18px 18px !important;
}

.trip-row.mvb-renderer-trip-row > .trip-main .trip-name{
  display:block !important;
  width:100% !important;
  margin:0 0 10px !important;
  font-size:1.05rem !important;
  font-weight:900 !important;
  line-height:1.2 !important;
  color:var(--text, #071225) !important;
  text-align:left !important;
}

.trip-row.mvb-renderer-trip-row > .trip-main .trip-meta{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:flex-start !important;
  align-items:center !important;
  gap:8px 10px !important;
  width:100% !important;
  margin:0 0 12px !important;
  text-align:left !important;
  background:transparent !important;
}

.trip-row.mvb-renderer-trip-row > .trip-main .trip-meta > span,
.trip-row.mvb-renderer-trip-row > .trip-main .trip-meta > button,
.trip-row.mvb-renderer-trip-row > .trip-main .trip-meta > .badge,
.trip-row.mvb-renderer-trip-row > .trip-main .trip-meta > .trip-meta-help-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  max-width:100% !important;
  min-height:30px !important;
  padding:6px 10px !important;
  margin:0 !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.82) !important;
  border:1px solid rgba(148,163,184,.30) !important;
  box-shadow:none !important;
  line-height:1.15 !important;
  white-space:normal !important;
  text-align:left !important;
}





.trip-row.mvb-renderer-trip-row > .trip-main .trip-meta > .mvb-ports-call-btn{
  font-weight:850 !important;
  cursor:pointer !important;
}

.trip-row.mvb-renderer-trip-row > .trip-main .trip-meta-help-btn{
  width:30px !important;
  min-width:30px !important;
  padding:0 !important;
}

/* Undo the centered/narrow meta look from previous patches */
.trip-row.mvb-renderer-trip-row > .trip-main .trip-meta,
.trip-row.mvb-renderer-trip-row > .trip-main .trip-meta *{
  transform:none !important;
}

/* Flights and planner stay full-width under the clean chip row */
.trip-row.mvb-renderer-trip-row > .trip-main .trip-flights,
.trip-row.mvb-renderer-trip-row > .trip-main .trip-planner,
.trip-row.mvb-renderer-trip-row > .trip-main .trip-shareline{
  width:100% !important;
  clear:both !important;
}

/* Dark mode chip polish */
body:not(.light) .trip-row.mvb-renderer-trip-row > .trip-main .trip-meta > span,
body:not(.light) .trip-row.mvb-renderer-trip-row > .trip-main .trip-meta > button,
body:not(.light) .trip-row.mvb-renderer-trip-row > .trip-main .trip-meta > .badge,
body:not(.light) .trip-row.mvb-renderer-trip-row > .trip-main .trip-meta > .trip-meta-help-btn{
  background:rgba(15,23,42,.72) !important;
  border-color:rgba(255,255,255,.16) !important;
  color:#e5e7eb !important;
}

@media(max-width:760px){
  

  

  
}


/* MVB compact voyage title/details area + apply to past voyages too */
.trip-row.mvb-renderer-trip-row > .trip-main{
  min-height:0 !important;
  height:auto !important;
  background:transparent !important;
  background-image:none !important;
  padding:14px 18px 18px !important;
}

.trip-row.mvb-renderer-trip-row > .trip-main::before,
.trip-row.mvb-renderer-trip-row > .trip-main::after{
  display:none !important;
  content:none !important;
  background:none !important;
  background-image:none !important;
}

/* Remove the big pale title bar. Keep the voyage name as a compact heading. */
.trip-row.mvb-renderer-trip-row > .trip-main .trip-name{
  display:block !important;
  min-height:0 !important;
  height:auto !important;
  width:100% !important;
  margin:0 0 10px !important;
  padding:0 !important;
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
  font-size:1.05rem !important;
  font-weight:900 !important;
  line-height:1.22 !important;
  color:var(--text, #071225) !important;
  text-align:left !important;
}

/* Compact chip row directly under the title. */
.trip-row.mvb-renderer-trip-row > .trip-main .trip-meta{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:flex-start !important;
  align-items:center !important;
  align-content:flex-start !important;
  gap:8px 10px !important;
  width:100% !important;
  min-height:0 !important;
  height:auto !important;
  margin:0 0 12px !important;
  padding:0 !important;
  text-align:left !important;
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
}

/* Make remaining info look like intentional chips, not a vertical list. */
.trip-row.mvb-renderer-trip-row > .trip-main .trip-meta > span,
.trip-row.mvb-renderer-trip-row > .trip-main .trip-meta > button,
.trip-row.mvb-renderer-trip-row > .trip-main .trip-meta > .badge,
.trip-row.mvb-renderer-trip-row > .trip-main .trip-meta > .trip-meta-help-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  max-width:100% !important;
  min-height:30px !important;
  padding:6px 10px !important;
  margin:0 !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.82) !important;
  border:1px solid rgba(148,163,184,.30) !important;
  box-shadow:none !important;
  line-height:1.15 !important;
  white-space:normal !important;
  text-align:left !important;
}

.trip-row.mvb-renderer-trip-row > .trip-main .trip-meta > .badge.good{
  background:rgba(34,197,94,.13) !important;
  border-color:rgba(34,197,94,.30) !important;
}

.trip-row.mvb-renderer-trip-row > .trip-main .trip-meta > .badge.warn{
  background:rgba(245,158,11,.15) !important;
  border-color:rgba(245,158,11,.32) !important;
}

.trip-row.mvb-renderer-trip-row > .trip-main .trip-meta > .trip-meta-help-btn{
  width:30px !important;
  min-width:30px !important;
  padding:0 !important;
}

/* Past/completed voyages use the same polished layout. */
.trip-row.mvb-renderer-trip-row.is-past,
.trip-row.mvb-renderer-trip-row.trip-past,
.trip-row.mvb-renderer-trip-row.completed,
.trip-row.mvb-renderer-trip-row.is-completed{
  opacity:1 !important;
}

.trip-row.mvb-renderer-trip-row > .trip-main .trip-flights,
.trip-row.mvb-renderer-trip-row > .trip-main .trip-planner,
.trip-row.mvb-renderer-trip-row > .trip-main .trip-shareline{
  width:100% !important;
  clear:both !important;
}

body:not(.light) .trip-row.mvb-renderer-trip-row > .trip-main .trip-name{
  color:#f8fafc !important;
}

body:not(.light) .trip-row.mvb-renderer-trip-row > .trip-main .trip-meta > span,
body:not(.light) .trip-row.mvb-renderer-trip-row > .trip-main .trip-meta > button,
body:not(.light) .trip-row.mvb-renderer-trip-row > .trip-main .trip-meta > .badge,
body:not(.light) .trip-row.mvb-renderer-trip-row > .trip-main .trip-meta > .trip-meta-help-btn{
  background:rgba(15,23,42,.72) !important;
  border-color:rgba(255,255,255,.16) !important;
  color:#e5e7eb !important;
}

@media(max-width:760px){
  .trip-row.mvb-renderer-trip-row > .trip-main{
    padding:14px 12px 16px !important;
  }

  .trip-row.mvb-renderer-trip-row > .trip-main .trip-meta{
    gap:7px !important;
  }

  .trip-row.mvb-renderer-trip-row > .trip-main .trip-meta > span,
  .trip-row.mvb-renderer-trip-row > .trip-main .trip-meta > button,
  .trip-row.mvb-renderer-trip-row > .trip-main .trip-meta > .badge{
    font-size:.92rem !important;
  }
}


/* Shift voyage title right so it does not clip */
.trip-row.mvb-renderer-trip-row > .trip-main .trip-name{
    padding-left:40px !important;
    margin-left:0 !important;
}

@media(max-width:760px){
  .trip-row.mvb-renderer-trip-row > .trip-main .trip-name{
      padding-left:32px !important;
  }
}


/* MVB dynamic ship hero photos */
.mvb-renderer-hero-photo,
.mvb-existing-photo-hero,
[data-mvb-existing-photo-hero="1"]{
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.90) 0%, rgba(255,255,255,.46) 28%, rgba(255,255,255,.08) 72%),
    var(--mvb-ship-hero-url, url("/ship-photo/default-hero.png")) !important;
  background-size:contain !important;
  background-position:right center !important;
  background-color:transparent !important;
  padding-right:18px !important;
  background-repeat:no-repeat !important;
}

body:not(.light) .mvb-renderer-hero-photo,
body:not(.light) .mvb-existing-photo-hero,
body:not(.light) [data-mvb-existing-photo-hero="1"]{
  background-image:
    linear-gradient(90deg, rgba(15,23,42,.92) 0%, rgba(15,23,42,.48) 32%, rgba(15,23,42,.08) 74%),
    var(--mvb-ship-hero-url, url("/ship-photo/default-hero.png")) !important;
}

@media(max-width:760px){
  .mvb-renderer-hero-photo,
  .mvb-existing-photo-hero,
  [data-mvb-existing-photo-hero="1"]{
    background-image:
      linear-gradient(180deg, rgba(255,255,255,.84) 0%, rgba(255,255,255,.34) 48%, rgba(255,255,255,.06) 100%),
      var(--mvb-ship-hero-url, url("/ship-photo/default-hero.png")) !important;
    background-position:center bottom !important;
  }

  body:not(.light) .mvb-renderer-hero-photo,
  body:not(.light) .mvb-existing-photo-hero,
  body:not(.light) [data-mvb-existing-photo-hero="1"]{
    background-image:
      linear-gradient(180deg, rgba(15,23,42,.86) 0%, rgba(15,23,42,.40) 44%, rgba(15,23,42,.08) 100%),
      var(--mvb-ship-hero-url, url("/ship-photo/default-hero.png")) !important;
  }
}


/* MVB force dynamic ship hero photos */
.mvb-renderer-hero-photo,
.mvb-existing-photo-hero,
[data-mvb-existing-photo-hero="1"],
.trip-hero,
.voyage-hero,
.hero-card{
  background-size:contain !important;
  background-position:right center !important;
  background-color:transparent !important;
  padding-right:18px !important;
  background-repeat:no-repeat !important;
}


/* MVB ship photo fit fix: clean hero image only */
.trip-row.mvb-renderer-trip-row > .mvb-renderer-hero{
  grid-template-columns:minmax(330px, 36%) minmax(0, 64%) !important;
  min-height:220px !important;
  background:linear-gradient(135deg, rgba(240,249,255,.98), rgba(255,255,255,.94)) !important;
}

.trip-row.mvb-renderer-trip-row > .mvb-renderer-hero .mvb-renderer-hero-copy{
  z-index:2 !important;
  background:linear-gradient(90deg, rgba(240,249,255,.98), rgba(240,249,255,.86) 72%, rgba(240,249,255,0)) !important;
}

.trip-row.mvb-renderer-trip-row > .mvb-renderer-hero .mvb-renderer-hero-photo{
  display:block !important;
  position:relative !important;
  width:100% !important;
  min-height:220px !important;
  overflow:hidden !important;
  border-radius:0 !important;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.90) 0%, rgba(255,255,255,.46) 22%, rgba(255,255,255,.08) 56%, rgba(255,255,255,0) 100%),
    var(--mvb-ship-hero-url, url("/ship-photo/default-hero.png")) !important;
  background-size:100% 100%, cover !important;
  background-position:left center, center center !important;
  background-repeat:no-repeat !important;
  box-shadow:none !important;
  transform:none !important;
}

/* prevent duplicate/old image layer from showing below or beside the true hero */
.trip-row.mvb-renderer-trip-row > .trip-main,
.trip-row.mvb-renderer-trip-row > .trip-main *,
.trip-row.mvb-renderer-trip-row > .trip-main::before,
.trip-row.mvb-renderer-trip-row > .trip-main::after,
.trip-row.mvb-renderer-trip-row > .trip-actions,
.trip-row.mvb-renderer-trip-row > .trip-actions *,
.trip-row.mvb-renderer-trip-row > .trip-actions::before,
.trip-row.mvb-renderer-trip-row > .trip-actions::after{
  background-image:none !important;
}

/* hide any accidental hero/photo clones outside the top hero */
.trip-row.mvb-renderer-trip-row > .trip-main .mvb-renderer-hero,
.trip-row.mvb-renderer-trip-row > .trip-main .mvb-renderer-hero-photo,
.trip-row.mvb-renderer-trip-row > .trip-actions .mvb-renderer-hero,
.trip-row.mvb-renderer-trip-row > .trip-actions .mvb-renderer-hero-photo{
  display:none !important;
}

body:not(.light) .trip-row.mvb-renderer-trip-row > .mvb-renderer-hero{
  background:linear-gradient(135deg, rgba(15,23,42,.98), rgba(30,41,59,.92)) !important;
}

body:not(.light) .trip-row.mvb-renderer-trip-row > .mvb-renderer-hero .mvb-renderer-hero-copy{
  background:linear-gradient(90deg, rgba(15,23,42,.96), rgba(15,23,42,.76) 72%, rgba(15,23,42,0)) !important;
}

body:not(.light) .trip-row.mvb-renderer-trip-row > .mvb-renderer-hero .mvb-renderer-hero-photo{
  background-image:
    linear-gradient(90deg, rgba(15,23,42,.92) 0%, rgba(15,23,42,.50) 28%, rgba(15,23,42,.12) 64%, rgba(15,23,42,0) 100%),
    var(--mvb-ship-hero-url, url("/ship-photo/default-hero.png")) !important;
}

@media(max-width:760px){
  .trip-row.mvb-renderer-trip-row > .mvb-renderer-hero{
    grid-template-columns:1fr !important;
  }

  .trip-row.mvb-renderer-trip-row > .mvb-renderer-hero .mvb-renderer-hero-photo{
    min-height:185px !important;
    background-image:
      linear-gradient(180deg, rgba(255,255,255,.84) 0%, rgba(255,255,255,.34) 48%, rgba(255,255,255,.06) 100%),
      var(--mvb-ship-hero-url, url("/ship-photo/default-hero.png")) !important;
    background-size:100% 100%, cover !important;
    background-position:left top, center center !important;
  }

  body:not(.light) .trip-row.mvb-renderer-trip-row > .mvb-renderer-hero .mvb-renderer-hero-photo{
    background-image:
      linear-gradient(180deg, rgba(15,23,42,.86) 0%, rgba(15,23,42,.40) 44%, rgba(15,23,42,.08) 100%),
      var(--mvb-ship-hero-url, url("/ship-photo/default-hero.png")) !important;
  }
}


/* MVB clean dynamic ship image crop:
   Your generated ship files include a dark name label at the bottom.
   This crops/zooms the image so the label bar does not show in the hero. */
.trip-row.mvb-renderer-trip-row > .mvb-renderer-hero{
  overflow:hidden !important;
  isolation:isolate !important;
}

.trip-row.mvb-renderer-trip-row > .mvb-renderer-hero .mvb-renderer-hero-photo{
  position:relative !important;
  display:block !important;
  overflow:hidden !important;
  min-height:220px !important;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.55) 22%, rgba(255,255,255,.12) 58%, rgba(255,255,255,0) 100%),
    var(--mvb-ship-hero-url, url("/ship-photo/default-hero.png")) !important;
  background-size:100% 100%, 122% auto !important;
  background-position:left center, center 38% !important;
  background-repeat:no-repeat !important;
  border:0 !important;
  box-shadow:none !important;
}

/* Remove accidental image backgrounds everywhere outside the hero photo. */
.trip-row.mvb-renderer-trip-row,
.trip-row.mvb-renderer-trip-row > .trip-actions,
.trip-row.mvb-renderer-trip-row > .trip-main,
.trip-row.mvb-renderer-trip-row > .trip-main *,
.trip-row.mvb-renderer-trip-row > .trip-actions *,
.trip-row.mvb-renderer-trip-row > .trip-main::before,
.trip-row.mvb-renderer-trip-row > .trip-main::after,
.trip-row.mvb-renderer-trip-row > .trip-actions::before,
.trip-row.mvb-renderer-trip-row > .trip-actions::after{
  background-image:none !important;
}

.trip-row.mvb-renderer-trip-row > .mvb-renderer-hero{
  background-image:none !important;
}

.trip-row.mvb-renderer-trip-row > .mvb-renderer-hero .mvb-renderer-hero-copy{
  background-image:linear-gradient(90deg, rgba(240,249,255,.98), rgba(240,249,255,.80) 76%, rgba(240,249,255,0)) !important;
}

.trip-row.mvb-renderer-trip-row > .mvb-renderer-hero .mvb-renderer-hero-photo{
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.55) 22%, rgba(255,255,255,.12) 58%, rgba(255,255,255,0) 100%),
    var(--mvb-ship-hero-url, url("/ship-photo/default-hero.png")) !important;
}

/* Hide any duplicate injected photo blocks outside the top hero. */
.trip-row.mvb-renderer-trip-row > :not(.mvb-renderer-hero) .mvb-renderer-hero-photo,
.trip-row.mvb-renderer-trip-row > :not(.mvb-renderer-hero) .mvb-existing-photo-hero,
.trip-row.mvb-renderer-trip-row > :not(.mvb-renderer-hero) [data-mvb-existing-photo-hero="1"]{
  display:none !important;
}

body:not(.light) .trip-row.mvb-renderer-trip-row > .mvb-renderer-hero .mvb-renderer-hero-copy{
  background-image:linear-gradient(90deg, rgba(15,23,42,.96), rgba(15,23,42,.74) 76%, rgba(15,23,42,0)) !important;
}

body:not(.light) .trip-row.mvb-renderer-trip-row > .mvb-renderer-hero .mvb-renderer-hero-photo{
  background-image:
    linear-gradient(90deg, rgba(15,23,42,.92) 0%, rgba(15,23,42,.50) 28%, rgba(15,23,42,.12) 64%, rgba(15,23,42,0) 100%),
    var(--mvb-ship-hero-url, url("/ship-photo/default-hero.png")) !important;
  background-size:100% 100%, 122% auto !important;
  background-position:left center, center 38% !important;
}

@media(max-width:760px){
  .trip-row.mvb-renderer-trip-row > .mvb-renderer-hero .mvb-renderer-hero-photo{
    min-height:185px !important;
    background-image:
      linear-gradient(180deg, rgba(255,255,255,.84) 0%, rgba(255,255,255,.34) 48%, rgba(255,255,255,.06) 100%),
      var(--mvb-ship-hero-url, url("/ship-photo/default-hero.png")) !important;
    background-size:100% 100%, 128% auto !important;
    background-position:left top, center 35% !important;
  }

  body:not(.light) .trip-row.mvb-renderer-trip-row > .mvb-renderer-hero .mvb-renderer-hero-photo{
    background-image:
      linear-gradient(180deg, rgba(15,23,42,.86) 0%, rgba(15,23,42,.40) 44%, rgba(15,23,42,.08) 100%),
      var(--mvb-ship-hero-url, url("/ship-photo/default-hero.png")) !important;
    background-size:100% 100%, 128% auto !important;
    background-position:left top, center 35% !important;
  }
}


/* MVB mobile Ports of Call popup fix */
.mvb-ports-popup-backdrop{
  position:fixed !important;
  inset:0 !important;
  z-index:2147483600 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:18px !important;
  background:rgba(15,23,42,.56) !important;
  backdrop-filter:blur(10px) !important;
  -webkit-backdrop-filter:blur(10px) !important;
}

.mvb-ports-popup{
  width:min(620px, calc(100vw - 36px)) !important;
  max-width:620px !important;
  max-height:min(76vh, 720px) !important;
  overflow:hidden !important;
  border-radius:24px !important;
  background:#fff !important;
  color:#071225 !important;
  border:1px solid rgba(148,163,184,.38) !important;
  box-shadow:0 24px 80px rgba(15,23,42,.32) !important;
}

.mvb-ports-popup-head{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:14px !important;
  padding:18px 20px !important;
  border-bottom:1px solid rgba(148,163,184,.22) !important;
}

.mvb-ports-popup-head h2{
  margin:0 !important;
  font-size:1.28rem !important;
  line-height:1.1 !important;
  font-weight:950 !important;
}

.mvb-ports-popup-close{
  flex:0 0 auto !important;
  width:44px !important;
  height:40px !important;
  border-radius:999px !important;
  border:1px solid rgba(148,163,184,.36) !important;
  background:#fff !important;
  color:#071225 !important;
  font-size:1.35rem !important;
  line-height:1 !important;
}

.mvb-ports-popup-table{
  padding:14px 20px 20px !important;
  overflow:auto !important;
  max-height:calc(min(76vh, 720px) - 78px) !important;
}

.mvb-port-head,
.mvb-port-row{
  display:grid !important;
  grid-template-columns:48px minmax(0,1fr) 124px !important;
  gap:12px !important;
  align-items:center !important;
}

.mvb-port-head{
  color:#64748b !important;
  font-size:.78rem !important;
  font-weight:900 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  padding:0 0 9px !important;
}

.mvb-port-row{
  padding:11px 0 !important;
  border-top:1px solid rgba(148,163,184,.18) !important;
}

.mvb-port-row span,
.mvb-port-row strong{
  min-width:0 !important;
  line-height:1.25 !important;
}

.mvb-port-row strong{
  font-weight:850 !important;
  color:#0f172a !important;
}

body:not(.light) .mvb-ports-popup{
  background:#0f172a !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.16) !important;
}

body:not(.light) .mvb-ports-popup-close{
  background:#111827 !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.18) !important;
}

body:not(.light) .mvb-port-row strong{
  color:#fff !important;
}

/* iPhone/mobile: make popup a centered bottom sheet that fits inside the screen */
@media(max-width:760px){
  .mvb-ports-popup-backdrop{
    align-items:flex-end !important;
    justify-content:center !important;
    padding:12px 12px calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .mvb-ports-popup{
    width:100% !important;
    max-width:100% !important;
    max-height:62vh !important;
    border-radius:24px 24px 18px 18px !important;
    transform:none !important;
  }

  .mvb-ports-popup-head{
    padding:16px 16px 14px !important;
  }

  .mvb-ports-popup-head h2{
    font-size:1.15rem !important;
  }

  .mvb-ports-popup-close{
    width:42px !important;
    height:38px !important;
  }

  .mvb-ports-popup-table{
    padding:12px 16px 18px !important;
    max-height:calc(62vh - 72px) !important;
  }

  .mvb-port-head,
  .mvb-port-row{
    grid-template-columns:38px minmax(0, 1fr) 86px !important;
    gap:8px !important;
  }

  .mvb-port-head{
    font-size:.68rem !important;
  }

  .mvb-port-row{
    padding:10px 0 !important;
    font-size:.92rem !important;
  }

  .mvb-port-row strong{
    overflow-wrap:anywhere !important;
  }
}


/* MVB past voyage hero details */
.trip-row.mvb-renderer-trip-row > .mvb-renderer-hero.mvb-renderer-hero-completed .mvb-renderer-hero-copy{
  gap:8px !important;
}

.trip-row.mvb-renderer-trip-row > .mvb-renderer-hero.mvb-renderer-hero-completed .mvb-hero-line{
  font-size:1.02rem !important;
  font-weight:850 !important;
  line-height:1.22 !important;
}

.trip-row.mvb-renderer-trip-row > .mvb-renderer-hero.mvb-renderer-hero-completed .mvb-hero-sub{
  margin-bottom:2px !important;
}


/* MVB safe trip title above hero */
.trip-row.mvb-renderer-trip-row > .mvb-trip-title-above-hero{
  display:block !important;
  width:100% !important;
  padding:16px 18px 12px !important;
  margin:0 !important;
  font-size:clamp(1.08rem, 2vw, 1.35rem) !important;
  line-height:1.18 !important;
  font-weight:950 !important;
  letter-spacing:-.03em !important;
  color:var(--text, #071225) !important;
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
  text-align:left !important;
}

.trip-row.mvb-renderer-trip-row > .trip-main .trip-name{
  display:none !important;
}

body:not(.light) .trip-row.mvb-renderer-trip-row > .mvb-trip-title-above-hero{
  color:#f8fafc !important;
}

@media(max-width:760px){
  .trip-row.mvb-renderer-trip-row > .mvb-trip-title-above-hero{
    padding:14px 14px 10px !important;
    font-size:1.08rem !important;
  }
}


/* MVB mobile compact voyage cards */
@media (max-width:760px){

  .trip-row.mvb-renderer-trip-row{
    overflow:hidden !important;
  }

  .trip-row.mvb-renderer-trip-row > .mvb-trip-title-above-hero{
    padding:10px 12px 6px !important;
    font-size:1rem !important;
    line-height:1.15 !important;
    margin:0 !important;
  }

  .trip-row.mvb-renderer-trip-row > .mvb-renderer-hero{
    grid-template-columns:1fr !important;
    min-height:0 !important;
    margin:0 10px 8px !important;
    border-radius:18px !important;
  }

  .trip-row.mvb-renderer-trip-row > .mvb-renderer-hero .mvb-renderer-hero-copy{
    padding:14px 14px 10px !important;
    gap:5px !important;
  }

  .trip-row.mvb-renderer-trip-row > .mvb-renderer-hero .mvb-hero-kicker{
    font-size:.9rem !important;
    line-height:1.1 !important;
  }

  .trip-row.mvb-renderer-trip-row > .mvb-renderer-hero .countdown,
  .trip-row.mvb-renderer-trip-row > .mvb-renderer-hero .mvb-hero-countdown{
    font-size:1.55rem !important;
    line-height:1.05 !important;
    margin:4px 0 2px !important;
  }

  .trip-row.mvb-renderer-trip-row > .mvb-renderer-hero .mvb-hero-line,
  .trip-row.mvb-renderer-trip-row > .mvb-renderer-hero .mvb-hero-date,
  .trip-row.mvb-renderer-trip-row > .mvb-renderer-hero .mvb-hero-sub{
    font-size:.88rem !important;
    line-height:1.16 !important;
  }

  .trip-row.mvb-renderer-trip-row > .mvb-renderer-hero .mvb-renderer-hero-photo{
    min-height:118px !important;
    height:118px !important;
    background-size:100% 100%, cover !important;
    background-position:left top, center center !important;
    opacity:.96 !important;
  }

  .trip-row.mvb-renderer-trip-row > .trip-actions{
    padding:0 10px 8px !important;
    gap:6px !important;
    justify-content:flex-start !important;
  }

  .trip-row.mvb-renderer-trip-row > .trip-actions .btn,
  .trip-row.mvb-renderer-trip-row > .trip-actions button{
    min-width:0 !important;
    width:auto !important;
    flex:1 1 calc(50% - 6px) !important;
    min-height:34px !important;
    padding:6px 8px !important;
    font-size:.78rem !important;
    border-radius:999px !important;
  }

  .trip-row.mvb-renderer-trip-row > .trip-main{
    padding:8px 10px 12px !important;
  }

  .trip-row.mvb-renderer-trip-row > .trip-main .trip-meta{
    gap:6px !important;
    margin-bottom:8px !important;
  }

  .trip-row.mvb-renderer-trip-row > .trip-main .trip-meta > span,
  .trip-row.mvb-renderer-trip-row > .trip-main .trip-meta > button,
  .trip-row.mvb-renderer-trip-row > .trip-main .trip-meta > .badge{
    min-height:28px !important;
    padding:5px 8px !important;
    font-size:.78rem !important;
    line-height:1.1 !important;
  }

  .trip-row.mvb-renderer-trip-row .flight-row,
  .trip-row.mvb-renderer-trip-row .flight-card,
  .trip-row.mvb-renderer-trip-row .trip-flight-row{
    min-height:36px !important;
    padding:7px 8px !important;
  }

  .trip-row.mvb-renderer-trip-row .trip-planner,
  .trip-row.mvb-renderer-trip-row .planner-card{
    margin-top:8px !important;
  }

  .trip-row.mvb-renderer-trip-row .deck-ship-actions,
  .trip-row.mvb-renderer-trip-row .trip-doc-actions{
    gap:8px !important;
  }
}

@media (max-width:430px){
  .trip-row.mvb-renderer-trip-row > .mvb-renderer-hero .mvb-renderer-hero-photo{
    min-height:96px !important;
    height:96px !important;
  }

  .trip-row.mvb-renderer-trip-row > .trip-actions .btn,
  .trip-row.mvb-renderer-trip-row > .trip-actions button{
    flex-basis:100% !important;
  }
}


/* MVB hero ship image fit fix */
.trip-row.mvb-renderer-trip-row > .mvb-renderer-hero{
  overflow:hidden !important;
  isolation:isolate !important;
}

.trip-row.mvb-renderer-trip-row > .mvb-renderer-hero .mvb-renderer-hero-photo{
  display:block !important;
  overflow:hidden !important;
  min-height:220px !important;
  height:auto !important;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.70) 18%, rgba(255,255,255,.25) 42%, rgba(255,255,255,0) 72%),
    var(--mvb-ship-hero-url, url("/ship-photo/default-hero.png")) !important;
  background-size:100% 100%, cover !important;
  background-position:left center, center 52% !important;
  background-repeat:no-repeat !important;
  border:0 !important;
  box-shadow:none !important;
  transform:none !important;
}

body:not(.light) .trip-row.mvb-renderer-trip-row > .mvb-renderer-hero .mvb-renderer-hero-photo{
  background-image:
    linear-gradient(90deg, rgba(15,23,42,.96) 0%, rgba(15,23,42,.70) 22%, rgba(15,23,42,.28) 48%, rgba(15,23,42,0) 74%),
    var(--mvb-ship-hero-url, url("/ship-photo/default-hero.png")) !important;
  background-size:100% 100%, cover !important;
  background-position:left center, center 52% !important;
}

@media (min-width:761px){
  .trip-row.mvb-renderer-trip-row > .mvb-renderer-hero{
    grid-template-columns:minmax(280px, 36%) minmax(0, 64%) !important;
    min-height:220px !important;
  }
  .trip-row.mvb-renderer-trip-row > .mvb-renderer-hero .mvb-renderer-hero-copy{
    min-height:220px !important;
  }
}

@media (max-width:760px){
  .trip-row.mvb-renderer-trip-row > .mvb-renderer-hero{
    grid-template-columns:1fr !important;
  }
  .trip-row.mvb-renderer-trip-row > .mvb-renderer-hero .mvb-renderer-hero-photo{
    min-height:138px !important;
    height:138px !important;
    background-image:
      linear-gradient(180deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.34) 45%, rgba(255,255,255,0) 100%),
      var(--mvb-ship-hero-url, url("/ship-photo/default-hero.png")) !important;
    background-size:100% 100%, cover !important;
    background-position:left top, center 54% !important;
  }
  body:not(.light) .trip-row.mvb-renderer-trip-row > .mvb-renderer-hero .mvb-renderer-hero-photo{
    background-image:
      linear-gradient(180deg, rgba(15,23,42,.90) 0%, rgba(15,23,42,.42) 45%, rgba(15,23,42,0) 100%),
      var(--mvb-ship-hero-url, url("/ship-photo/default-hero.png")) !important;
    background-size:100% 100%, cover !important;
    background-position:left top, center 54% !important;
  }
}

.trip-row.mvb-renderer-trip-row > .trip-actions,
.trip-row.mvb-renderer-trip-row > .trip-main,
.trip-row.mvb-renderer-trip-row > .trip-main *,
.trip-row.mvb-renderer-trip-row > .trip-actions *{
  background-image:none !important;
}


/* Android/mobile unsaved dialog fix:
   keep the full discard/keep menu above the pinned bottom navigation. */
@media (max-width: 820px){
  .tt-unsaved-confirm-overlay{
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 16px 14px calc(104px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 999999 !important;
  }

  .tt-unsaved-confirm-card{
    width: min(100%, 520px) !important;
    max-height: calc(100vh - 150px - env(safe-area-inset-bottom, 0px)) !important;
    overflow: auto !important;
    margin: 0 auto !important;
  }

  .tt-unsaved-confirm-actions{
    display: grid !important;
    gap: 10px !important;
  }

  .tt-unsaved-confirm-actions .btn,
  .tt-unsaved-confirm-actions button{
    min-height: 44px !important;
  }
}


.mvb-account-email-tip{
  margin: 6px 0 10px;
  font-size: 0.88rem;
  line-height: 1.35;
  color: var(--muted, #64748b);
}

body:not(.light) .mvb-account-email-tip{
  color: rgba(226,232,240,.78);
}


/* MVB account buttons above pinned mobile nav */
@media (max-width:820px){
  .account-settings-actions,
  .account-actions,
  .modal-actions{
    position:sticky !important;
    bottom:calc(78px + env(safe-area-inset-bottom,0px)) !important;
    z-index:999 !important;
    background:inherit !important;
    padding-bottom:16px !important;
    margin-bottom:8px !important;
  }

  .account-settings-card,
  .account-modal,
  .modal-card{
    max-height:calc(100dvh - 120px) !important;
    overflow-y:auto !important;
    padding-bottom:110px !important;
  }

  .account-email-tip{
    margin-bottom:90px !important;
  }
}


/* MVB forced mobile Account Settings action bar
   This docks Cancel / Save Account above the pinned bottom nav. */
@media (max-width: 820px){
  body.mvb-account-docked-open .mvb-account-mobile-actionbar{
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 1000001 !important;
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.96) 20%, rgba(255,255,255,.99) 100%) !important;
    border-top: 1px solid rgba(148,163,184,.24) !important;
    box-shadow: 0 -18px 40px rgba(15,23,42,.12) !important;
  }

  body:not(.light).mvb-account-docked-open .mvb-account-mobile-actionbar{
    background:
      linear-gradient(180deg, rgba(15,23,42,0), rgba(15,23,42,.96) 20%, rgba(15,23,42,.99) 100%) !important;
    box-shadow: 0 -18px 40px rgba(0,0,0,.34) !important;
  }

  .mvb-account-mobile-actionbar .btn,
  .mvb-account-mobile-actionbar button{
    min-height: 44px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
  }

  body.mvb-account-docked-open .account-settings-modal,
  body.mvb-account-docked-open .account-modal,
  body.mvb-account-docked-open #account-settings-modal,
  body.mvb-account-docked-open #account-modal{
    padding-bottom: calc(166px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.mvb-account-docked-open .account-settings-card,
  body.mvb-account-docked-open .account-card,
  body.mvb-account-docked-open #account-settings,
  body.mvb-account-docked-open .account-settings-panel,
  body.mvb-account-docked-open .modal-card{
    padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.mvb-account-docked-open .account-email-tip,
  body.mvb-account-docked-open .mvb-account-email-tip{
    margin-bottom: 18px !important;
  }
}



/* MVB Account Settings action polish
   Keeps Cancel / Save Account visible and makes the footer feel intentional. */
.account-settings-actions{
  display:flex !important;
  justify-content:flex-end !important;
  align-items:center !important;
  gap:12px !important;
  padding:16px 22px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
  margin-top:16px !important;
  border-top:1px solid rgba(16,36,63,.10) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0), rgba(247,251,255,.94) 26%, rgba(247,251,255,.98) 100%) !important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.account-settings-actions .btn,
.account-settings-actions button{
  min-height:46px !important;
  border-radius:999px !important;
  padding:0 22px !important;
  font-weight:800 !important;
  box-shadow:none !important;
}

.account-settings-actions .btn-primary,
.account-settings-actions button.btn-primary,
#account-settings-save{
  color:#fff !important;
  background:linear-gradient(135deg,#22aeea,#5ecfff) !important;
  border:1px solid rgba(34,174,234,.35) !important;
  box-shadow:0 10px 26px rgba(34,174,234,.28) !important;
}

.account-settings-actions .btn:not(.btn-primary),
#account-settings-cancel{
  background:rgba(255,255,255,.72) !important;
  color:#405269 !important;
  border:1px solid rgba(16,36,63,.14) !important;
}

.account-email-tip,
.mvb-account-email-tip{
  display:block !important;
  margin:10px 0 0 !important;
  padding:10px 12px !important;
  border-radius:14px !important;
  font-size:.88rem !important;
  line-height:1.35 !important;
  color:#52657c !important;
  background:rgba(34,174,234,.08) !important;
  border:1px solid rgba(34,174,234,.14) !important;
}

html.dark .account-settings-actions,
html.dark-theme .account-settings-actions,
html.theme-dark .account-settings-actions,
html[data-theme="dark"] .account-settings-actions,
body.dark .account-settings-actions,
body.dark-theme .account-settings-actions,
body.theme-dark .account-settings-actions,
body[data-theme="dark"] .account-settings-actions{
  border-top-color:rgba(255,255,255,.10) !important;
  background:
    linear-gradient(180deg, rgba(8,24,44,0), rgba(8,24,44,.88) 24%, rgba(8,24,44,.96) 100%) !important;
}

html.dark .account-settings-actions .btn:not(.btn-primary),
html.dark-theme .account-settings-actions .btn:not(.btn-primary),
html.theme-dark .account-settings-actions .btn:not(.btn-primary),
html[data-theme="dark"] .account-settings-actions .btn:not(.btn-primary),
body.dark .account-settings-actions .btn:not(.btn-primary),
body.dark-theme .account-settings-actions .btn:not(.btn-primary),
body.theme-dark .account-settings-actions .btn:not(.btn-primary),
body[data-theme="dark"] .account-settings-actions .btn:not(.btn-primary),
html.dark #account-settings-cancel,
body.dark #account-settings-cancel{
  background:rgba(255,255,255,.06) !important;
  color:rgba(255,255,255,.82) !important;
  border-color:rgba(255,255,255,.16) !important;
}

html.dark .account-email-tip,
html.dark-theme .account-email-tip,
html.theme-dark .account-email-tip,
html[data-theme="dark"] .account-email-tip,
body.dark .account-email-tip,
body.dark-theme .account-email-tip,
body.theme-dark .account-email-tip,
body[data-theme="dark"] .account-email-tip,
html.dark .mvb-account-email-tip,
body.dark .mvb-account-email-tip{
  color:rgba(226,232,240,.84) !important;
  background:rgba(34,174,234,.10) !important;
  border-color:rgba(34,174,234,.18) !important;
}

@media (max-width:640px){
  .account-settings-modal{
    max-height:calc(100dvh - 76px - env(safe-area-inset-bottom,0px)) !important;
  }

  .account-settings-body{
    padding-bottom:8px !important;
  }

  .account-settings-actions{
    position:sticky !important;
    bottom:0 !important;
    z-index:10 !important;
    justify-content:center !important;
    padding:14px 16px calc(18px + env(safe-area-inset-bottom,0px)) !important;
    margin:14px -22px -18px !important;
  }

  .account-settings-actions .btn,
  .account-settings-actions button{
    flex:0 1 auto !important;
    min-width:118px !important;
  }
}

@media (max-width:420px){
  .account-settings-actions{
    gap:10px !important;
  }

  .account-settings-actions .btn,
  .account-settings-actions button{
    min-width:0 !important;
    flex:1 1 0 !important;
    padding-left:14px !important;
    padding-right:14px !important;
  }
}

/* =========================================================
   MVB v63 — exact voyage-card chip order (working CSS)
   Row 1: Cost, Paid, Left, Paid in full, OBC, Shareholder,
          Add-ons, Free at Sea, Dining, Prepaid Service,
          Latitudes, Notes, Tips, Hotel
   Row 2: Import Center, View Ports of Call
   ========================================================= */
.trip-row.mvb-renderer-trip-row .trip-meta{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:7px 9px !important;
}

/* Legacy v60 labels are intentionally hidden. */
.trip-row.mvb-renderer-trip-row .trip-meta > .mvb-meta-row-label{
  display:none !important;
}

.trip-row.mvb-renderer-trip-row .trip-meta > [data-trip-meta-key="cost"]{order:1 !important;}
.trip-row.mvb-renderer-trip-row .trip-meta > [data-trip-meta-key="paid"]{order:2 !important;}
.trip-row.mvb-renderer-trip-row .trip-meta > [data-trip-meta-key="left"]{order:3 !important;}
.trip-row.mvb-renderer-trip-row .trip-meta > [data-trip-meta-key="final-payment"]{order:3 !important;}
.trip-row.mvb-renderer-trip-row .trip-meta > [data-trip-meta-key="paid-in-full"]{order:4 !important;}
.trip-row.mvb-renderer-trip-row .trip-meta > [data-trip-meta-key="credit"]{order:5 !important;}
.trip-row.mvb-renderer-trip-row .trip-meta > [data-trip-meta-key="shareholder"]{order:6 !important;}
.trip-row.mvb-renderer-trip-row .trip-meta > [data-trip-meta-key="addons"]{order:7 !important;}
.trip-row.mvb-renderer-trip-row .trip-meta > .mvb-fas-voyage-badge,
.trip-row.mvb-renderer-trip-row .trip-meta > [data-trip-meta-key="free-at-sea"],
.trip-row.mvb-renderer-trip-row .trip-meta > [data-trip-meta-key="free-at-sea-plus"]{order:8 !important;}
.trip-row.mvb-renderer-trip-row .trip-meta > [data-trip-meta-key="dining"]{order:9 !important;}
.trip-row.mvb-renderer-trip-row .trip-meta > [data-trip-meta-key="service-charges"]{order:10 !important;}
.trip-row.mvb-renderer-trip-row .trip-meta > [data-trip-meta-key="ship"]{order:11 !important;}
.trip-row.mvb-renderer-trip-row .trip-meta > [data-trip-meta-key="notes"]{order:12 !important;}
.trip-row.mvb-renderer-trip-row .trip-meta > .trip-meta-help-btn{order:13 !important;}
.trip-row.mvb-renderer-trip-row .trip-meta > [data-trip-meta-key="dates"]{order:14 !important;}
.trip-row.mvb-renderer-trip-row .trip-meta > [data-trip-meta-key="excursions"]{order:15 !important;}

/* Force the two voyage tools onto their own line. */
.trip-row.mvb-renderer-trip-row .trip-meta::before{
  content:"";
  flex:0 0 100%;
  width:100%;
  height:0;
  order:100 !important;
}
.trip-row.mvb-renderer-trip-row .trip-meta > [data-trip-meta-key="import-history"]{order:101 !important;}
.trip-row.mvb-renderer-trip-row .trip-meta > [data-trip-meta-key="ports"]{order:102 !important;}

/* Tools remain visually actionable. */
.trip-row.mvb-renderer-trip-row .trip-meta > .mvb-meta-tools:not(.trip-meta-help-btn){
  font-weight:850 !important;
}

@media(max-width:760px){
  .trip-row.mvb-renderer-trip-row .trip-meta{gap:7px !important;}
}


/* MVB v65 — Ports of Call and Import Center are primary hero actions now. */
.trip-row.mvb-renderer-trip-row .trip-meta::before{
  content:none !important;
  display:none !important;
}


/* === MyVoyageBoard v187: Account Security reset-password launcher === */
.account-reset-password-btn{
  width:100%; box-sizing:border-box; margin-top:12px;
  display:flex; align-items:center; justify-content:flex-start; gap:10px;
  min-height:52px; padding:13px 15px; border-radius:16px;
  font-weight:900; text-align:left;
}
.account-reset-password-arrow{margin-left:auto; font-size:1.65rem; line-height:1; opacity:.6;}

@media (max-width:640px){
  .change-password-backdrop{
    align-items:stretch; justify-content:stretch; padding:0;
    background:rgba(15,23,42,.42);
  }
  .change-password-modal{
    width:100%; height:100%; max-height:none; border-radius:0; border:0;
    padding:calc(18px + env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
    display:flex; flex-direction:column; overflow:auto;
  }
  .change-password-body{margin-top:8px;}
  .change-password-actions{
    margin-top:auto; padding-top:22px; position:sticky; bottom:0;
  }
  .change-password-actions .btn{min-height:52px;}
}

/* MyVoyageBoard v239 — voyage hero normal-zoom polish
   Keeps the spacious zoomed-out look, but prevents the countdown and ship image
   from feeling oversized/cropped at ordinary desktop/tablet browser widths. */
@media (min-width:761px){
  .trip-row.mvb-renderer-trip-row > .mvb-renderer-hero{
    grid-template-columns:minmax(320px, 41%) minmax(0, 59%) !important;
    min-height:214px !important;
  }

  .trip-row.mvb-renderer-trip-row > .mvb-renderer-hero .mvb-renderer-hero-copy{
    min-width:0 !important;
    min-height:214px !important;
    padding:24px 26px !important;
    gap:7px !important;
  }

  .trip-row.mvb-renderer-trip-row > .mvb-renderer-hero .mvb-hero-kicker{
    font-size:clamp(1.02rem, 1.55vw, 1.38rem) !important;
    line-height:1.12 !important;
    letter-spacing:-.025em !important;
  }

  .trip-row.mvb-renderer-trip-row > .mvb-renderer-hero .mvb-hero-countdown,
  .trip-row.mvb-renderer-trip-row > .mvb-renderer-hero .mvb-hero-countdown .countdown{
    font-size:clamp(1.65rem, 2.45vw, 2.32rem) !important;
    line-height:1.02 !important;
    letter-spacing:-.045em !important;
    white-space:nowrap !important;
    overflow:visible !important;
  }

  .trip-row.mvb-renderer-trip-row > .mvb-renderer-hero .mvb-hero-date,
  .trip-row.mvb-renderer-trip-row > .mvb-renderer-hero .mvb-hero-line,
  .trip-row.mvb-renderer-trip-row > .mvb-renderer-hero .mvb-hero-sub{
    font-size:clamp(.88rem, 1.15vw, 1rem) !important;
    line-height:1.18 !important;
  }

  .trip-row.mvb-renderer-trip-row > .mvb-renderer-hero .mvb-renderer-hero-photo{
    min-height:214px !important;
    height:214px !important;
    background-size:100% 100%, contain !important;
    background-position:left center, center center !important;
    background-color:#eef9ff !important;
  }

  body:not(.light) .trip-row.mvb-renderer-trip-row > .mvb-renderer-hero .mvb-renderer-hero-photo{
    background-size:100% 100%, contain !important;
    background-position:left center, center center !important;
    background-color:#0b1f33 !important;
  }
}

/* Mid-width Safari/iPad landscape is where the old hero looked most cramped. */
@media (min-width:761px) and (max-width:1120px){
  .trip-row.mvb-renderer-trip-row > .mvb-renderer-hero{
    grid-template-columns:minmax(330px, 43%) minmax(0, 57%) !important;
  }

  .trip-row.mvb-renderer-trip-row > .mvb-renderer-hero .mvb-renderer-hero-copy{
    padding:22px 22px !important;
  }

  .trip-row.mvb-renderer-trip-row > .mvb-renderer-hero .mvb-hero-countdown,
  .trip-row.mvb-renderer-trip-row > .mvb-renderer-hero .mvb-hero-countdown .countdown{
    font-size:clamp(1.55rem, 2.65vw, 2.05rem) !important;
  }
}

/* Very wide desktop: let the ship photo have more room again. */
@media (min-width:1320px){
  .trip-row.mvb-renderer-trip-row > .mvb-renderer-hero{
    grid-template-columns:minmax(300px, 36%) minmax(0, 64%) !important;
    min-height:220px !important;
  }
  .trip-row.mvb-renderer-trip-row > .mvb-renderer-hero .mvb-renderer-hero-copy{
    min-height:220px !important;
    padding:26px 30px !important;
  }
  .trip-row.mvb-renderer-trip-row > .mvb-renderer-hero .mvb-renderer-hero-photo{
    min-height:220px !important;
    height:220px !important;
  }
}

/* MyVoyageBoard v240 — balanced hero photo at normal and zoomed-out desktop widths.
   v239 used contain, which protected the ship but left a large empty photo area on wide screens.
   This restores a filled photo panel while keeping the ship centered and readable. */
@media (min-width:761px){
  .trip-row.mvb-renderer-trip-row > .mvb-renderer-hero{
    grid-template-columns:minmax(340px, 39%) minmax(0, 61%) !important;
  }

  .trip-row.mvb-renderer-trip-row > .mvb-renderer-hero .mvb-renderer-hero-photo{
    background-size:100% 100%, cover !important;
    background-position:left center, center 56% !important;
    background-color:#eef9ff !important;
  }

  body:not(.light) .trip-row.mvb-renderer-trip-row > .mvb-renderer-hero .mvb-renderer-hero-photo{
    background-size:100% 100%, cover !important;
    background-position:left center, center 56% !important;
    background-color:#0b1f33 !important;
  }
}

@media (min-width:1320px){
  .trip-row.mvb-renderer-trip-row > .mvb-renderer-hero{
    grid-template-columns:minmax(350px, 38%) minmax(0, 62%) !important;
  }
  .trip-row.mvb-renderer-trip-row > .mvb-renderer-hero .mvb-renderer-hero-photo{
    min-height:224px !important;
    height:224px !important;
    background-position:left center, center 55% !important;
  }
}